外贸展示企业网站,游戏代理是什么,做个平台网站怎么做,学成在线网页制作文章目录 基础用法第一种第二种 限制itemdiaggable重新排序交换移动的两个元素的次序每次都重置item的index 基础用法
第一种
draggable v-modellist :optionsdragOptionsdiv classitem v-foritem in list :key… 文章目录 基础用法第一种第二种 限制itemdiaggable重新排序交换移动的两个元素的次序每次都重置item的index 基础用法
第一种
draggable v-modellist :optionsdragOptionsdiv classitem v-foritem in list :keyitem.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 vuedraggable4.1.0 。就很奇怪npm上搜不到这个版本即使用vuedraggablelatest也都是2.x的版本但用npm view vuedraggable能看到next是4.1.0。但你偏偏能安装上去还能正常显示使用就绝啦。如果是2.x的版本会报错 Cannot read properties of undefined (reading ‘header’)而且页面也不会显示。超好奇是从哪知道的4.1.0的用法呀有人知道吗可以教教我吗
draggable
classimage-list v-modellistitem-keyidchosen-classchosenClassanimation300forceFallbacktruetemplate #item{ element }div{{ element.name }}/div/template/draggablelist: [{ 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-modellist :optionsdragOptionsdiv classitem v-foritem in list :keyitem.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-modellist :movehandleMove endhandleEnd :optionsdragOptionsdiv classitem v-foritem in list :keyitem.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-modellist :optionsdragOptionsdiv classitem v-foritem in list :keyitem.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);}}}}
