vue拖拽组件vuedraggable使用说明详解 vue拖拽组件vuedraggable使用说明

vue拖拽组件vuedraggable的使用说明，供大家参考，具体内容如下
需了解H5的draggable属性，通过下面的代码注释，可了解

Document.box {width:500px; height: 150px; border:1px solid black; margin-top: 40px; }我是可以拖拽的文字

vuedraggabe使用说明
首先通过yarn add vuedraggable或者npm i -S vuedraggable安装组件
引入组件并在vue的components 中配置声明

import draggable from 'vuedraggable'...export default {components: {draggable,},...

直接通过draggable组件作为被动元素的容器，即可实现内部元素的拖拽

{{element.name}}vue

多个draggable容器之间拖拽，只需要配置draggable组件的props group为同一个组即可
props 属性之list 就是推拽元素的list
当点击拖拽元素时，拖拽元素会自动加上一个.sortable-chosen的class类名，可通过这个class设置样式（比如背景色）
当把拖拽元素拖到其他位置时，拖拽元素会自动加上一个.sortable-ghost的class类名，可通过这个class设置样式（比如背景色）
draggable组件内还可以加 header slot / footer slot 此时需要在draggable组件上加上draggable=".item"code>，通过设置可拖拽元素的class，显示表示组件内部哪些元素可以拖拽