vue3 拖拽vuedraggable使用

npm install vuedraggable@next --save # vue3

页面中引入 import Draggable from "vuedraggable";

    <Draggable :list="list" :item-key="item => item.id" :animation="100" class="list-group" :forceFallback="true" chosen-class="chosenClass" group="componentsGroup">
                <template #item="{ element }">
                  <div class="item bck1 group_left_Item"   @click="handleUndistr">
                            <img :src="element.avatar == null ? man : element.avatar" alt="" class="manImage" style="width: 50px;height: 50px;">
                            <div class="name">{{ element.label }}</div>
                      </div>
                </template>
</Draggable>

.list-group{

            display: flex;

            flex-wrap: wrap;

            align-content: baseline;

        }

const list = reactive([
    {
        label: "图片1",
        img: man,
        id: 1,
    },
    {
        label: "图片2",
        img: man,
        id: 2,
    },
    {
        label: "图片3",
        img: man,
        id: 3,
    },
    {
        label: "图片4",
        img: man,
        id: 4,
    },
]);

属性（Props）

1. list：要显示和拖放的数组，该数组中的每个项将在列表中显示。
2. group：一个字符串或函数，用于标识可拖放元素的分组。同一分组内的元素可以互相拖放，不同分组的元素之间不可拖放。
3. clone：一个布尔值，指定是否在拖动时创建元素的克隆。默认为false，即直接移动原始元素。
4. transition-mode：指定在拖动时元素的过渡模式，可以是in-out或out-in。
5. chosen-class：拖动时选中元素应用的 CSS 类。
6. ghost-class：拖动时生成的占位元素应用的 CSS 类。
7. handle：一个 CSS 选择器字符串，指定拖动手柄的元素。只有拖动手柄的部分可以用于拖动，而不是整个元素。

事件（Events）

1. start：开始拖动时触发的事件。
2. end：拖动结束时触发的事件，包括拖动成功或取消。
3. add：拖动项被添加到列表时触发的事件。
4. remove：拖动项被从列表中移除时触发的事件。
5. update：列表中的项被重新排序时触发的事件。

方法（Methods）

1. move：一个函数，用于自定义拖动项的移动逻辑。通过返回false或其他特定值来控制是否允许移动或进行特定位置的调整。
2. getUnderlyingVm：一个方法，用于获取当前拖动的元素对应的 Vue 实例。
3. getRelatedContext：一个方法，用于获取相关的列表上下文信息，包括当前列表和源列表的信息。
4. getPointerEvent：一个方法，用于获取当前拖动操作的指针事件对象。
5. sortableMixin：一个混入对象，提供了一些实用的方法来处理拖放逻辑。

插槽（Slots）

vuedraggable还支持一些插槽，用于自定义拖动项的展示和交互：

1. item：用于自定义每个拖动项的展示。
2. fallback：在不支持原生拖放API的环境中，用于自定义回退模式下的拖放效果。

样式再调一调ok了，也可多列表拖拽，：list就是接收item数据的数组