vue3 el-select结合vuedraggable实现div拖拽并记录拖拽之后的顺序

实现效果

注意点

1.draggable绑定的数据类型必须是个数组，且必须要用ref定义。即使用reactvie([{xxx:xxx}])不嵌套数据，也出不来效果

2.在dragg 身上添加 item-key="id"不然会报错itemKey缺失问题

代码

template中

 
  <el-select
          v-model="value"
          value-key="id"
          placeholder="Select"
          style="width: 240px"
          multiple
        >
          <el-option
            v-for="item in options1"
            :key="item.id"
            :label="item.label"
            :value="item"
          />
 </el-select>

 <draggable
          :list="dragData"
          :force-fallback="true"
          chosen-class="chosen"
          animation="300"
          @end="onEnd"
          item-key="id"
        >
          <template #item="{ element }">
            <div class="item">
              {{ element?.order?.order[0]?.name  }}
            </div>
          </template>
</draggable>
 <div style="width: 500px">
          {{ dragData.map((i) => i.id) }}
    </div>

script

 import draggable from "vuedraggable";

  let value = ref([
  {
    id: 1,
    label: "A",
    order: {
      firmware_id: 11,
      order: [ { id: 111, name: "顺序A"}],
    },
  },
]);

const options1 = reactive([
  {
    id: 1,
    label: "A",
    order: {
      firmware_id: 11,
       order: [ { id: 111, name: "顺序A"}],
    },
  },
  {
    id: 2,
    label: "B",
    order: {
      firmware_id: 22,
      order: [ { id: 222, name: "顺序B"}],
    },
  },
  {
    id: 3,
    label: "C",
    order: {
      firmware_id: 33,
      order: [ { id: 333, name: "顺序C"}],
    },
  },
]);
// 只能绑定ref--不能绑定reactive
let dragData = ref(<any>[]);
watch(
  () => value.value,
  (val) => {
    dragData.value = val;
  },
  {
    immediate: true,
  }
);

css

  background-color: skyblue;
  text-align: center;
  margin: 10px;
  padding: 8px;
  color: #fff;
  font-size: 18px;