js拖动元素从一个位置到另一个位置（vuedraggable）的使用

        vue项目中遇到一个功能，设置一些功能，设置的时候需要从功能区（card）,将需要显示的功能（a标签）拖拽到指定区域：使用vuedraggable来实现。

1.引用vuedraggable：

import draggable from "vuedraggable"

2.添加组件

... 
components: { draggable },
...

3.页面中添加两个vuedraggable，一个用来保存显示的功能selectedList，一个保存不显示的功能unselectedList

<a-card size="small" title="已选">
          <draggable
            group="menu"
            v-model="selectedList"
            @start="onMove" @end="onEnd"
            >
              <a type="button" v-for="item in selectedList" :key="item.dtype"><span>{{item.name}}</span></a>
          </draggable>
        </a-card>
        <a-card size="small" title="备选">
           <draggable
            group="menu"
            v-model="unselectedList"
            @start="onMove" @end="onEnd"
            >
              <a type="button" v-for="item in unselectedList" :key="item.dtype"><span>{{item.name}}</span></a>
          </draggable>
        </a-card>

4.onMove 和 onEnd事件，可以添加你在拖拽的同时需要增加的其他的相关功能

 onMove(e) {
      return true // 需要返回true
    },
    onEnd(e) {
     
    },

5.注意：阻止火狐的默认拖拽行为

created() {
     // 阻止火狐浏览器默认的拖拽搜索行为
    document.body.ondrop = (event) => {
        // 阻止事件默认行为
        event.preventDefault()
        // 阻止时间冒泡
        event.stopPropagation()
    }

  },

6.保存时，只需要使用selectedList即可，该数据保存的就是当前已选的相。