vue实现拖拽的插件
vue-draggable
基于Sortable.js封装，适用于Vue 2/3的拖拽排序组件，支持列表、表格、跨容器拖拽。
安装
npm install vuedraggable基本用法（Vue 3）
<template>
<draggable
v-model="list"
item-key="id"
@end="onDragEnd">
<template #item="{ element }">
<div>{{ element.name }}</div>
</template>
</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('拖拽完成');
}
}
};
</script>Vue.Draggable.Next
Vue 3专用版本，功能与vuedraggable类似，但针对Composition API优化。
安装
npm install vue-draggable-next示例
<template>
<draggable
v-model="items"
:group="{ name: 'shared' }">
<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>
</draggable>
</template>
<script setup>
import { ref } from 'vue';
import draggable from 'vue-draggable-next';
const items = ref([
{ id: 1, text: 'A' },
{ id: 2, text: 'B' }
]);
</script>interact.js集成
若需要更复杂的拖拽交互（如缩放、旋转），可直接集成interact.js。
基础实现
<template>
<div
ref="dragEl"
class="draggable-box">
拖拽我
</div>
</template>
<script>
import interact from 'interactjs';
export default {
mounted() {
interact(this.$refs.dragEl)
.draggable({
onmove: (event) => {
const target = event.target;
const x = (parseFloat(target.style.left) || 0) + event.dx;
const y = (parseFloat(target.style.top) || 0) + event.dy;
target.style.transform = `translate(${x}px, ${y}px)`;
}
});
}
};
</script>选择建议
- 简单排序：优先使用
vue-draggable或Vue.Draggable.Next。 - 跨框架兼容：Sortable.js原生支持React/Vue/Angular。
- 复杂交互：选择
interact.js或d3-drag。
可通过事件监听（如@start、@update）实现自定义逻辑，如限制拖拽区域、动态调整样式等。
