目录

简介和 Demo 展示

最近需要有个拖拽列表的需求，发现一个简单好用的 Vue 可拖拽组件。安利一下~

Vue Smooth DnD 是一个快速、轻量级的拖放、可排序的 Vue.js 库，封装了 smooth-dnd 库。

Vue Smooth DnD 主要包含了两个组件，Container 和 Draggable，Container 包含可拖动的元素或组件，它的每一个子元素都应该被 Draggable 包裹。每一个要被设置为可拖动的元素都需要被 Draggable 包裹。

安装： npm i vue-smooth-dnd

一个简单的 Demo ，展示组件的基础用法，实现了可以拖拽的列表。

效果

API: Container

属性

关于 drag-class，drop-class 和 drop-placeholder.className 的效果演示

    
    ....

类对应样式

.card-ghost {
    transition: transform 0.18s ease;
    transform: rotateZ(35deg);
    background: red !important;
}
.card-ghost-drop {
    transition: transform 1s cubic-bezier(0,1.43,.62,1.56);
    transform: rotateZ(0deg);
    background: green !important;
}
.drop-preview {
    border: 1px dashed #abc;
    margin: 5px;
    background: yellow !important;
}

实际效果（我这优秀的配色啊）

生命周期

一次拖动的生命周期通过一系列回调和事件进行描述和控制，下面以包含 3 个容器的示例为例进行说明
（直接复制了文档没有翻译，API 详细解释可以看后面介绍。）：

Mouse     Calls  Callback / Event       Parameters              Notes

down   o                                                        Initial click

move   o                                                        Initial drag
       |
       |         get-child-payload()    index                   Function should return payload
       |
       |   3 x   should-accept-drop()   srcOptions, payload     Fired for all containers
       |
       |   3 x   drag-start             dragResult              Fired for all containers
       |
       |         drag-enter
       v

move   o                                                        Drag over containers
       |
       |   n x   drag-leave                                     Fired as draggable leaves container
       |   n x   drag-enter                                     Fired as draggable enters container
       v

up     o                                                        Finish drag

                 should-animate-drop()  srcOptions, payload     Fires once for dropped container

           3 x   drag-end               dragResult              Fired for all containers

           n x   drop                   dropResult              Fired only for droppable containers

请注意，应在每次 drag-start 之前和每次 drag-end 之前触发 should-accept-drop，但为了清晰起见，此处已省略。

其中 dragResult 参数的格式：

dragResult: {
    payload,        # 负载 可以理解为用来记录被拖动的对象
    isSource,       # 是否是被拖动的容器本身
    willAcceptDrop, # 是否可以被放置
}

其中 dropResult 参数的格式：

dropResult: {
    addedIndex,     # 被放置的新添加元素的下标，没有则为 null
    removedIndex,   # 将被移除的元素下标，没有则为 null
    payload,        # 拖动的元素对象，可通过 getChildPayload 指定
    droppedElement, # 放置的 DOM 元素
}

回调

回调在用户交互之前和期间提供了额外的逻辑和检查。

事件

API: Draggable

tag

同容器的 tag 指定可拖拽元素的 DOM 元素标签。

实战

实现一个简单的团队协作任务管理器。

效果

到此这篇关于Vue 可拖拽组件Vue Smooth DnD的使用详解的文章就介绍到这了,更多相关Vue 可拖拽组件内容请搜索趣讯吧以前的文章或继续浏览下面的相关文章希望大家以后多多支持趣讯吧！