uni-app 集成 vuedraggable 实现拖拽排序
uni-app 集成 vuedraggable 实现拖拽排序
目前vuedraggable不支持uniapp, 希望有大神可以改写
19 回复
插件市场里有的全部是固定高度，元素固定高度的拖拽不难，但是实际业务场景不固定高度的拖拽排序是最多的，位置的计算十分复杂，这个希望官方可以出一个组件，用来做这种多端不固定高度的拖拽排序。
在 uni-app 中集成 vuedraggable 实现拖拽排序功能，你可以按照以下步骤进行集成。vuedraggable 是一个基于 SortableJS 的 Vue 组件，用于实现拖拽排序功能。
首先，确保你已经安装了 vuedraggable。在 uni-app 项目中，你可以通过 npm 或 yarn 进行安装：
npm install vuedraggable --save
# 或者
yarn add vuedraggable
接下来，在你的 Vue 组件中引入并使用 vuedraggable。以下是一个简单的示例代码，展示了如何在 uni-app 中实现拖拽排序：
<template>
<view class="container">
<draggable v-model="items" @end="onDragEnd">
<view v-for="(item, index) in items" :key="item.id" class="draggable-item">
{{ item.name }}
</view>
</draggable>
</view>
</template>
<script>
import draggable from 'vuedraggable';
export default {
components: {
draggable
},
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
{ id: 4, name: 'Item 4' }
]
};
},
methods: {
onDragEnd(evt) {
console.log('Drag ended:', evt);
// 在这里处理拖拽结束后的逻辑，比如保存新的排序顺序
// 可以调用 API 将新的排序顺序发送到服务器
}
}
};
</script>
<style scoped>
.container {
padding: 20px;
}
.draggable-item {
padding: 10px;
margin-bottom: 10px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 4px;
}
</style>
在这个示例中，我们创建了一个简单的 uni-app 组件，该组件包含一个 draggable 列表。v-model 绑定到 items 数组，用于双向绑定数据。@end 事件监听器在拖拽结束时触发 onDragEnd 方法，你可以在这个方法中处理拖拽结束后的逻辑，比如将新的排序顺序发送到服务器。
注意：
vuedraggable在uni-app中的表现可能与在纯 Vue 项目中略有不同，特别是在小程序平台。确保在目标平台上测试你的代码。- 如果需要在小程序平台上使用拖拽功能，请确保你的基础库版本支持相关的特性。
通过上述步骤，你应该能够在 uni-app 中成功集成 vuedraggable 并实现拖拽排序功能。
