-
基于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>
-
标签:插件,vue,name,拖拽,next,draggable,id From: https://www.cnblogs.com/fqh123/p/17588442.html