vue使用插件实现拖拽
安装拖拽插件
推荐使用vuedraggable插件，它是基于Sortable.js的Vue组件，支持拖拽排序功能。通过npm或yarn安装：
npm install vuedraggable --save
# 或
yarn add vuedraggable基础用法示例
在Vue组件中引入并注册vuedraggable，通过v-model绑定数据实现列表拖拽排序：
<template>
<draggable v-model="list" @end="onDragEnd">
<div v-for="item in list" :key="item.id">{{ item.name }}</div>
</draggable>
</template>
<script>
import draggable from 'vuedraggable';
export default {
components: { draggable },
data() {
return {
list: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' }
]
};
},
methods: {
onDragEnd() {
console.log('排序后的列表:', this.list);
}
}
};
</script>跨列表拖拽
通过group属性实现不同列表间的元素转移：
<template>
<div class="container">
<draggable
v-model="listA"
group="shared"
@add="logChange">
<!-- 列表A内容 -->
</draggable>
<draggable
v-model="listB"
group="shared">
<!-- 列表B内容 -->
</draggable>
</div>
</template>自定义拖拽手柄
通过handle属性指定拖拽触发区域，避免整个元素可拖拽：
<draggable v-model="list" handle=".handle">
<div v-for="item in list" :key="item.id">
<span class="handle">≡</span>
{{ item.name }}
</div>
</draggable>禁用拖拽功能
通过disabled属性动态控制拖拽状态：
<draggable v-model="list" :disabled="isLocked">
<!-- 列表内容 -->
</draggable>动画效果
添加animation属性改善视觉体验，例如设置animation: 150表示150毫秒的过渡动画：
<draggable v-model="list" :animation="150">
<!-- 列表内容 -->
</draggable>注意事项
- 数据绑定需使用
v-model而非:list（旧版本语法） - 跨组件通信时建议使用Vuex管理共享状态
- 移动端需添加CSS样式
touch-action: none解决触摸冲突 - 复杂场景可结合
clone和pull属性控制拖拽行为
