vue 实现拖动
实现拖动的核心方法
在Vue中实现拖动功能可以通过HTML5的拖放API或第三方库如vuedraggable。以下是两种常见方案的实现细节。
使用HTML5原生拖放API
HTML5提供了draggable属性及相关事件（dragstart、dragend、dragover、drop等），适合基础拖动需求。
<template>
<div
draggable="true"
@dragstart="handleDragStart"
@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 draggedElement = document.getElementById(id);
e.target.appendChild(draggedElement);
}
}
}
</script>使用vuedraggable库
对于列表排序等复杂场景，推荐使用vuedraggable（基于Sortable.js）。安装后通过组件化方式实现：
npm install vuedraggable<template>
<draggable
v-model="list"
@end="onDragEnd"
>
<div v-for="item in list" :key="item.id">
{{ item.text }}
</div>
</draggable>
</template>
<script>
import draggable from 'vuedraggable';
export default {
components: { draggable },
data() {
return {
list: [
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' }
]
};
},
methods: {
onDragEnd() {
console.log('拖动后的顺序:', this.list);
}
}
};
</script>进阶功能实现
跨组件拖动
通过Vue的自定义事件或状态管理（如Vuex）实现跨组件数据传递。在draggable组件中配置group属性：
<draggable group="sharedGroupName" />拖动样式反馈
利用dragClass和ghostClass属性自定义拖动时的样式：
<draggable
ghost-class="ghost-style"
drag-class="drag-style"
>
<!-- 内容 -->
</draggable>.ghost-style {
opacity: 0.5;
}
.drag-style {
background-color: #f0f0f0;
}性能优化建议
对于大型列表，使用animation属性减少重排开销，或通过forceFallback: true强制使用Sortable.js的polyfill：
<draggable :force-fallback="true" />移动端适配
在移动设备上需添加触摸事件支持。vuedraggable已内置兼容性处理，若使用原生API需额外监听touchstart、touchmove等事件。
