vuedraggable固定某一item的记录

基础用法

第一种

<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);
        }
      }
    }
  }