vue实现可拖拽
实现拖拽功能的基本方法
在Vue中实现拖拽功能通常可以通过HTML5的Drag and Drop API或第三方库如vuedraggable来完成。以下是两种主要实现方式：
使用HTML5原生API
通过draggable属性和相关事件（dragstart, dragend, dragover, drop）实现基础拖拽。需要手动处理元素位置计算和状态管理。
使用vuedraggable库 基于Sortable.js封装，提供声明式语法和丰富的配置选项，适合列表排序、嵌套拖拽等复杂场景。
原生HTML5实现示例
<template>
<div
class="draggable-item"
draggable="true"
@dragstart="handleDragStart"
@dragover.prevent="handleDragOver"
@drop="handleDrop"
>拖动我</div>
<div class="drop-zone" @dragover.prevent @drop="handleDrop">放置区</div>
</template>
<script>
export default {
methods: {
handleDragStart(e) {
e.dataTransfer.setData('text/plain', e.target.id)
},
handleDrop(e) {
const id = e.dataTransfer.getData('text/plain')
const draggableElement = document.getElementById(id)
e.target.appendChild(draggableElement)
}
}
}
</script>使用vuedraggable实现
安装依赖：
npm install vuedraggable组件示例：
<template>
<draggable
v-model="list"
group="items"
@start="dragStart"
@end="dragEnd"
>
<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' }
]
}
}
}
</script>进阶功能实现
限制拖拽方向
通过move属性控制拖拽方向：
<draggable :move="checkMove">
// ...
methods: {
checkMove(evt) {
return evt.draggedContext.element.type !== 'forbidden'
}
}跨组件拖拽
使用相同的group名称实现组件间拖拽：
<draggable group="shared-group">拖拽样式控制 利用提供的CSS类名自定义样式：
.sortable-chosen {
background: #f0f0f0;
}
.sortable-ghost {
opacity: 0.5;
}性能优化建议
对于大型列表，使用animation属性设置较低的值（如150）来减少动画开销。虚拟滚动技术可以配合使用以处理超长列表场景。避免在拖拽过程中频繁触发计算属性或watcher。
移动端适配方案
触摸事件需要特殊处理，建议使用touch-drag插件或Hammer.js库补充移动端手势支持。vuedraggable的2.24+版本已改进移动端兼容性，但可能需要额外的CSS样式调整。
