vue 中使用vuedraggable，在两个列表之间拖动元素

        最近项目中，有一个需求：将左侧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中，随意使用即可。