Vue 可拖拽组件 Vue Smooth DnD 详解和应用演示 (2)

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

<Container # 省略其它属性... :animation-duration="1000" # 放置元素后动画延时 drag-class="card-ghost" drop-class="card-ghost-drop" :drop-placeholder="{ className: 'drop-preview', # 占位符的样式 animationDuration: '1000', # 占位符的动画延迟 showOnTop: true # 是否在其它元素的上面显示 设置为false会被其他的拖拽元素覆盖 }" > <!-- 一些可拖拽元素 --> <Draggable>....</Draggable> </Container>

类对应样式

.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 元素 } 回调

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

get-child-payload(index) 自定义传给 onDrop() 的 payload 对象。

should-accept-drop(sourceContainerOptions, payload) 用来确定容器是否可被放置，会覆盖 group-name 属性。

should-animate-drop(sourceContainerOptions, payload) 返回 false 则阻止放置动画。

get-ghost-parent() 返回幽灵元素（拖动时显示的元素）应该添加到的元素，默认是父元素，某些情况定位会出现问题，则可以选择自定义，如返回 document.body。

事件

@drag-start 在拖动开始时由所有容器发出的事件。参数 dragResult。

@drag-end 所有容器在拖动结束时调用的函数。 在 @drop 事件之前调用。参数 dragResult。

@drag-enter 每当拖动的项目在拖动时进入其边界时，相关容器要发出的事件。

@drag-leave 每当拖动的项目在拖动时离开其边界时，相关容器要发出的事件。

@drop-ready 当容器中可能放置位置的索引发生变化时，被拖动的容器将调用的函数。基本上，每次容器中的可拖动对象滑动以打开拖动项目的空间时都会调用它。参数 dropResult。

@drop 放置结束时所有相关容器会发出的事件（放置动画结束后）。源容器和任何可以接受放置的容器都被认为是相关的。参数 dropResult。

API: Draggable tag

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

实战