vue3 拖拽vuedraggable使用

A 筱筱泽、

已于 2024-04-12 09:48:50 修改

阅读量469

点赞数 2

文章标签： vue.js javascript 前端 css

于 2024-04-12 09:30:54 首次发布

本文链接：https://blog.csdn.net/weixin_67255581/article/details/137666197

版权

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）

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

事件（Events）

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

方法（Methods）

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

插槽（Slots）

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

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