环境:vue3+setup语法
首先放官方文档的链接:
中文版本: vue.draggable.next 中文文档 - itxst.com (民间翻译)
英文版本:GitHub - SortableJS/vue.draggable.next: Vue 3 compatible drag-and-drop component based on Sortable.js
因为自己写的过程中,官方文档和网上的资料都非常不明,使用版本各不相同,极易踩坑,自己写完后就总结一下,与诸位共勉。
做一个可重复拖拽生成的表格设计器,效果图如下:
(1)在终端使用npm命令下载插件
npm i -S vuedraggable@next
//导入
import draggable from 'vuedraggable'
(2)拖拽插件大致可分为两种使用方式——分组拖拽与单组拖拽
单组拖拽为只有一组数据,而拖拽是交换此组数据内部的位置,如下图所示:
而互相拖拽是有两组数据,两组数据可以各自内部换顺序,可以相互拖拽到对方的数组中。
本文需求只用到了互相拖拽,互相拖拽的代码形式如下:
//需要克隆的数据,A组
//拖拽的结果,B组
(4)使用component标签映射
// 使用函数映射