vue3拖拽插件vue-draggable-next
-
基于sortablejs；
npm地址：https://www.npmjs.com/package/vue-draggable-next
配置项：https://github.com/SortableJS/Sortable#options
import { VueDraggableNext as Draggable } from 'vue-draggable-next';
components: { HeaderTitle, TitlePanel, Draggable },
const myArray = ref([
{ id: 1, name: '1' },
{ id: 2, name: '2' },
{ id: 3, name: '3' },
{ id: 4, name: '4' },
])
// 拖拽结束
function dragEnd(e) {
console.log('e', e)
}
return {
myArray,
dragEnd,
}
html
<draggable v-model="myArray" @end="dragEnd"> <transition-group> <div class="drag-item" v-for="element in myArray" :key="element.id"> <span> {{ element.name }}--{{ element.id }}</span> </div> </transition-group> </draggable>
-