vue3使用拖拽组件draggable-next的使用教程【保姆级】

环境:vue3+setup语法

首先放官方文档的链接:

中文版本: vue.draggable.next 中文文档 - itxst.com (民间翻译)

英文版本:GitHub - SortableJS/vue.draggable.next: Vue 3 compatible drag-and-drop component based on Sortable.js

因为自己写的过程中,官方文档和网上的资料都非常不明,使用版本各不相同,极易踩坑,自己写完后就总结一下,与诸位共勉。

(一)首先,明确需求:

做一个可重复拖拽生成的表格设计器,效果图如下:

vue3使用拖拽组件draggable-next的使用教程【保姆级】_第1张图片

(二)搭一个基本的可互相拖拽的框架

(1)在终端使用npm命令下载插件

npm i -S vuedraggable@next
 
//导入
import draggable from 'vuedraggable'

(2)拖拽插件大致可分为两种使用方式——分组拖拽与单组拖拽

单组拖拽为只有一组数据,而拖拽是交换此组数据内部的位置,如下图所示:

vue3使用拖拽组件draggable-next的使用教程【保姆级】_第2张图片

而互相拖拽是有两组数据,两组数据可以各自内部换顺序,可以相互拖拽到对方的数组中。

本文需求只用到了互相拖拽,互相拖拽的代码形式如下:

    //需要克隆的数据,A组
    
      
    
 
//拖拽的结果,B组
 
    
  
 

 

(4)使用component标签映射

 
    
      
    
  
 
// 使用函数映射
 

                    
                    

你可能感兴趣的:(vue.js,javascript)