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

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

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

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

安装: npm i vue-smooth-dnd

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

<template> <div> <div> <Container @drop="onDrop"> <Draggable v-for="item in items" :key="item.id"> <div> {{item.data}} </div> </Draggable> </Container> </div> </div> </template> <script> import { Container, Draggable } from "vue-smooth-dnd"; const applyDrag = (arr, dragResult) => { const { removedIndex, addedIndex, payload } = dragResult console.log(removedIndex, addedIndex, payload) if (removedIndex === null && addedIndex === null) return arr const result = [...arr] let itemToAdd = payload if (removedIndex !== null) { itemToAdd = result.splice(removedIndex, 1)[0] } if (addedIndex !== null) { result.splice(addedIndex, 0, itemToAdd) } return result } const generateItems = (count, creator) => { const result = [] for (let i = 0; i < count; i++) { result.push(creator(i)) } return result } export default { name: "Simple", components: { Container, Draggable }, data() { return { items: generateItems(50, i => ({ id: i, data: "Draggable " + i })) }; }, methods: { onDrop(dropResult) { this.items = applyDrag(this.items, dropResult); } } }; </script> <style> .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; } </style>

效果

API: Container 属性 属性 类型 默认值 描述
:orientation   string   vertical   容器的方向,可以为 horizontalvertical  
:behaviour   string   move   描述被拖动的元素被移动或复制到目标容器。 可以为 movecopydrop-zonecontain 。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, yundefined  
:drag-handle-selector   string   undefined   用于指定可以开启拖拽的 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  

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwddfd.html