最近需要有个拖拽列表的需求，发现一个简单好用的 Vue 可拖拽组件，本文主要介绍了可拖拽组件Vue Smooth DnD的使用，感兴趣的可以了解一下
简介和 Demo 展示
最近需要有个拖拽列表的需求，发现一个简单好用的 Vue 可拖拽组件。安利一下~
Vue Smooth DnD 是一个快速、轻量级的拖放、可排序的 Vue.js 库，封装了 smooth-dnd 库。
Vue Smooth DnD 主要包含了两个组件，Container 和 Draggable，Container 包含可拖动的元素或组件，它的每一个子元素都应该被 Draggable 包裹。每一个要被设置为可拖动的元素都需要被 Draggable 包裹。
安装： npm i vue-smooth-dnd
一个简单的 Demo ，展示组件的基础用法，实现了可以拖拽的列表。
<div> <div class="simple-page"> <div class="draggable-item"> {{item.data}} </div></div></div> .draggable-item { height: 50px; line-height: 50px; text-align: center; display: block; background-color: #fff; outline: 0; border: 1px solid rgba(0, 0, 0, .125); margin-bottom: 2px; margin-top: 2px; cursor: default; user-select: none; }
效果
API: Container
属性
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| :orientation | string | vertical | 容器的方向，可以为 horizontal 或 vertical |
| :behaviour | string | move | 描述被拖动的元素被移动或复制到目标容器。 可以为 move 或 copy 或 drop-zone 或 contain 。move 可以在容器间互相移动，copy 是可以将元素复制到其他容器，但本容器内元素不可变，drop-zone 可以在容器间移动，但是容器内元素的顺序是固定的。contain 只能在容器内移动。 |
| :tag | string, NodeDescription | div | 容器的元素标签，默认是 div ，可以是字符串如 tag=”table” 也可以是包含 value和 props 属性的对象 :tag=”{value: ‘table’, props: {class: ‘my-table’}}” |
| :group-name | string | undefined | 可拖动元素可以在具有相同组名的容器之间移动。如果未设置组名容器将不接受来自外部的元素。 这种行为可以被 shouldAcceptDrop 函数覆盖。 见下文。 |
| :lock-axis | string | undefined | 锁定拖动的移动轴。可用值 x, y 或 undefined。 |
| :drag-handle-selector | string | undefined | 用于指定可以开本文来源gaodai$ma#com搞$$代**码网启拖拽的 CSS 选择器，如果不指定的话则元素内部任意位置都可抓取。 |
| :non-drag-area-selector | string | undefined | 禁止拖动的 CSS 选择器，优先于 dragHandleSelector. |
| :drag-begin-delay | number | 0（触控设备为 200） | 单位毫秒。表示点击元素持续多久后可以开始拖动。在此之前移动光标超过 5px 将取消拖动。 |
| :animation-duration | number | 250 | 单位毫秒。表示放置元素和重新排序的动画持续时间。 |
| :auto-scroll-enabled | boolean | true | 如果拖动项目接近边界，第一个可滚动父项将自动滚动。（这个属性没看懂= =） |
| :drag-class | string | undefined | 元素被拖动中的添加的类（不会影响拖拽结束后元素的显示）。 |
| :drop-class | string | undefined | 从拖拽元素被放置到被添加到页面过程中添加的类。 |
| :remove-on-drop-out | boolean | undefined | 如果设置为 true，在被拖拽元素没有被放置到任何相关容器时，使用元素索引作为 removedIndex 调用 onDrop() |
| :drop-placeholder | boolean,object | undefined | 占位符的选项。包含 className, animationDuration, showOnTop |
关于 drag-class，drop-class 和 drop-placeholder.className 的效果演示
<container以上就是Vue 可拖拽组件Vue Smooth DnD的使用详解的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue 可拖拽组件Vue Smooth DnD的使用详解
