最近项目中，有一个需求：将左侧div中的元素，拖拽到右侧的功能的需求。查看了下项目，已经安装了"vuedraggable": "^2.23.2"版本。所以直接使用该组件就可以了，之前没有用过，查了下，找了个最简单是使用方法：

1.页面引入vuedraggable

import draggable from "vuedraggable"

2.页面中的组件引入

components: { draggable },

3.定个两个数组，分别是两个拖拽组件中的数据源，如果有默认值也提前绑定好：

 data() {
    return {
        selectedList:[],
        unselectedList:[],
4.html, 使用两个draggable，group命名一致，就互相拖拽了：
 
<a-card  title="已选">
          <draggable
            group="menu"
            v-model="selectedList"
              <a type="button" v-for="item in selectedList" :key="item.dtype"><span>{{item.name}}</span></a>
          </draggable>
        </a-card>
        <a-card title="备选" >
           <draggable
            group="menu"
            v-model="unselectedList"
                {{item.name}}
              </a-button> -->
              <a type="button" v-for="item in unselectedList" :key="item.dtype"><span>{{item.name}}</span></a>
          </draggable>
        </a-card>
 
本来打算内部使用<a-button>,但是无法拖拽，猜测是由于a-button不是基本组件的缘故，所以修改为基础组件a,可以实现拖拽功能了。
 
5.数据就在selectedList中，随意使用即可。
                                    1、从需求出发,一个页面有两个表格 right 和left,要把left表格的选择行的数据 拖拽到right的某一行上,鼠标松开时,发起一个请求,然后刷新页面接下来一步一步拆分需求?分析:由于vue是MVVM模式, 原生的拖拽是操作的dom,有点相违背. 想要转移到在数据驱动这个上面来, 于是产生了改变鼠标样式的想法.2.如何实现,在left表格上按下改变鼠标样式,在right表格上鼠标抬起时获取...
录屏软件：screenToGif (将视频转为Gif，我认为简单又好操作)
我深知，文字的感知不如图片，图片的感知不如视频，所以希望在每一次的记录中，都有种收货与喜悦，虽然以前用过这个插件，相当强大的插件，但第一次从0到1，所以记录美好时刻~
1.多列之间想要互相拖动
要有相同的name，如：name:'site'
2.多列直接想要拷贝，不移除
设定pull属性 ，如p
                                    传递一个事件监听器，当用户移动模块时，会触发此事件。：传递一个函数，该函数定义了如何渲染每个模块。：传递一个标题数组，包括源列和目标列的标题。：传递一个包含所有模块的数组作为源数据。：指定哪些模块被选中，以及它们所在的列。：传递一个对象，设置列表的样式。
Sortable.js插件的配置信息
vue.draggable的clone拷贝实现常用菜单功能
本文参考文章 记录一下vuedraggable clone的坑，获取数据
前排提示： 如果你也遇到了编辑拖拽的单元数据时，原单元数据也跟着发生了变化，可以直接拖到最后看解决方法。
要实现的效果
有两个列表：
列表A为预设的组件，不能添加编辑和删除；
列表B为编辑区域，需要从列表A中拖拽组件，然后修改组件名称等一些信息。
通过分析需求，我们可以知道：
列表A和B的group name需相同；
                                    当涉及到在Vue.js中实现两个盒子之间的相互拖拽功能时，一个非常强大且常用的解决方案是使用vuedraggable插件。vuedraggable是一个基于Vue.js的拖拽排序组件，它能够帮助我们轻松地实现可拖拽的列表和项目。在本篇博客中，我将为你详细介绍如何使用vuedraggable来实现两个盒子之间的相互拖拽功能。通过使用vuedraggable插件，我们可以轻松地实现两个盒子之间的相互拖拽功能。这为用户提供了更好的交互体验，让他们能够自由地重新排序和移动项。
                                    在上面的示例中，我们使用v-for指令将items数组中的每个元素渲染为一个可拖动的div元素，并在dragstart事件处理程序中设置要传递的数据类型和值。我们还在放置区域的div元素上设置了dragover和drop事件处理程序，以便在元素拖动到目标区域时触发，并在drop事件处理程序中获取传递的数据类型和值，并根据这些数据更新items数组，从而实现拖放和携带数据的功能。这样，当拖动元素被放置到目标区域时，它将被移动到该区域并从原位置删除，并且可以通过getData方法获取传递的数据。
今天，我们将使用Vue.js来实现一个跨表格相互拖拽。在开发这个业务之前呢，也调研了网上很多解决方案，但个人感觉不太符合现在做的这个需求。所以，压根就自己再开发一套，方便以后维护。
什么需求呢？就是多个表格之间可以实现相互拖拽，即A表格中的表格项可以拖拽到B表格，B表格的表格项可以拖拽到C表格，并且它们之间可以单选、多选表格项相互拖拽。然后，D表格加以限制，每次只能够拖入一项，需输入密码，密码正确后，被拖入的一项替换D表格中的表格项，被替换的D表格项放入A表格，只能被替换，不能被删除。
文字太枯燥，我