VueDraggable组件当使用draggable或filter属性限制拖拽项后,拖拽剩余项,整个排序会错乱

[rationalol]

<VueDraggable 
          v-model="list"
          :animation="150"
          draggable=".can-draggable"
          filter=".non-draggable"
          @start="onDragStart"
          @end="onDragEnd"
      >
        <div
            v-for="item in list"
            :key="item.id"
            class="draggable-item"
            :class="{ 'non-draggable': item.disable,'can-draggable':!item.disable}"
            style="user-select: none"
        >
          <el-text>{{ item.name }}</el-text>
        </div>
      </VueDraggable>

[Chang-Chen]

兄弟，你用错了吧。

<script setup lang="ts">
import { VueDraggable } from 'vue-draggable-plus'
import { ref } from 'vue'

const list = ref([
  {
    name: '张三',
    id: 1,
    disable: false,
  },
  {
    name: '李四',
    id: 2,
    disable: false,
  },
  {
    name: '王五',
    id: 3,
    disable: true,
  },
  {
    name: '李二',
    id: 4,
    disable: false,
  },
])
const onDragStart = () => {}
const onDragEnd = () => {}
</script>

<template>
  <VueDraggable
    v-model="list"
    :animation="300"
    filter=".non-draggable"
    @start="onDragStart"
    @end="onDragEnd"
  >
      <div
        v-for="item in list"
        :key="item.id"
        class="draggable-item"
        :class="{ 'non-draggable': item.disable, 'can-draggable': !item.disable }"
        style="user-select: none"
      >
        <span>{{ item.name }}</span>
      </div>
  </VueDraggable>
</template>

<style scoped></style>