沈阳网站建设 熊掌号营销策划公司排名

---

基础用法

第一种

<draggable v-model="list" :options="dragOptions"><div class="item" v-for="item in list" :key="item.id">{{ item.name }}</div>
</draggable>
list: [{ id: 1, name: 'Item 1' },{ id: 2, name: 'Item 2' },{ id: 3, name: 'Item 3' },{ id: 4, name: 'Item 4' },{ id: 5, name: 'Item 5' },{ id: 6, name: 'Item 6' },],dragOptions: {group: 'items',// 在拖拽过程中检查每个元素的 draggable 属性draggable: '.draggable',},

第二种

这个版本是需要npm i vuedraggable@4.1.0 。就很奇怪，npm上搜不到这个版本，即使用vuedraggable@latest也都是2.x的版本，但用npm view vuedraggable，能看到next是4.1.0。但你偏偏能安装上去，还能正常显示使用，就绝啦。如果是2.x的版本会报错 Cannot read properties of undefined (reading ‘header’)，而且页面也不会显示。超好奇是从哪知道的4.1.0的用法呀，有人知道吗，可以教教我吗

<draggable
class="image-list" v-model="list"item-key="id"chosen-class="chosenClass"animation="300"forceFallback="true"><template #item="{ element }"><div>{{ element.name }}</div></template></draggable>list: [{ id: 1, name: 'Item 1' },{ id: 2, name: 'Item 2' },{ id: 3, name: 'Item 3' },{ id: 4, name: 'Item 4' },{ id: 5, name: 'Item 5' },{ id: 6, name: 'Item 6' },],

限制item

vuedraggable拖拽的时候，如果想要某个item不能拖动，有两种方式

diaggable

<draggable v-model="list" :options="dragOptions"><div class="item" v-for="item in list" :key="item.id" :draggable="!item.disableDrag" :class="{ 'draggable': !item.disableDrag }">{{ item.name }}</div>
</draggable>
list: [{ id: 1, name: 'Item 1', disableDrag: false },{ id: 2, name: 'Item 2', disableDrag: true },{ id: 3, name: 'Item 3', disableDrag: false },{ id: 4, name: 'Item 4', disableDrag: false },{ id: 5, name: 'Item 5', disableDrag: false },{ id: 6, name: 'Item 6', disableDrag: false },],dragOptions: {group: 'items',// 在拖拽过程中检查每个元素的 draggable 属性draggable: '.draggable',},

重新排序

使用自带的参数，这个参数能使该item不能被拖动，但是由于vuedraggable移动的时候是把移动的item拖到对应位置，其他item依次往前移，所以会导致导致不能移动的item会被动移动。例如123456，将1移动到4的位置，就会变为234156，而不是我个人以为的423156

交换移动的两个元素的次序

这个方式有bug就是元素不能斜着拖动，因为move会被触发多次，因为斜着拖到会碰到其他item。目前没想到怎么优化

<draggable v-model="list" :move='handleMove' @end='handleEnd' :options="dragOptions"><div class="item" v-for="item in list" :key="item.id">{{ item.name }}</div>
</draggable>
list: [{ id: 1, name: 'Item 1' },{ id: 2, name: 'Item 2' },{ id: 3, name: 'Item 3' },{ id: 4, name: 'Item 4' },{ id: 5, name: 'Item 5' },{ id: 6, name: 'Item 6' },],dragOptions: {group: 'items',// 在拖拽过程中检查每个元素的 draggable 属性draggable: '.draggable',},handleEnd(event) {console.log(event, this.list);const { oldIndex, newIndex } = event;if (oldIndex !== newIndex) {// 将1换到4的位置this.list.splice(newIndex, 1, this.startItem);// 将4换到1的位置this.list.splice(oldIndex, 1, this.endItem);}},handleMove(a, b) {console.log(a, b);if (a.draggedContext.element.id === 2 || a.relatedContext.element.id === 2) {// false则不能拖到return false;}const oldIndex = a.draggedContext.index;const newIndex = a.draggedContext.futureIndex;if (oldIndex !== newIndex) {// 如果不在这里存储一下的话，end的方法拿不到。存储移动的元素和目的地的元素this.startItem = JSON.parse(JSON.stringify(a.draggedContext.element));this.endItem = JSON.parse(JSON.stringify(a.relatedContext.element));}return true;},

每次都重置item的index

这是看的别的方法，贼拉好用

<draggable v-model="list" :options="dragOptions"><div class="item" v-for="item in list" :key="item.id">{{ item.name }}</div>
</draggable>
list: [{ id: 1, name: 'Item 1' },{ id: 2, name: 'Item 2' },{ id: 3, name: 'Item 3' },{ id: 4, name: 'Item 4' },{ id: 5, name: 'Item 5' },{ id: 6, name: 'Item 6' },],dragOptions: {group: 'items',// 在拖拽过程中检查每个元素的 draggable 属性draggable: '.draggable',},watch: {list: {immediate: true,deep: true,handler(newV, oldV) {console.log(newV, oldV);const targetIndex = newV.findIndex(i => i.id === 2);console.log(targetIndex);// 找到item且item的位置变了if (targetIndex !== -1 && targetIndex !== 1) {// 找到id为2的元素，删除const targetItem = newV.splice(targetIndex, 1)[0];// 再index为1的地方插入。即可保证该数据用于处于1的位置newV.splice(1, 0, targetItem);}}}}