vue-draggable拖拽组件库

1. 在项目中总会遇见一些需要排序的数据 ， 那我们可以通过vuedraggable 进行拖动排序 。
2. draggable为基于sortable.js的vue组件，用以实现拖拽功能。特性支持触摸设备支持拖拽和选择文本支持智能滚动，支持不同列表之间的拖拽。

安装：

npm i -S vuedraggable

引入：

import draggable from "vuedraggable"

以下截图：
属性：

options配置项:

事件:

部分代码：

  computed: {
            dragOptionsRight() {
                return {
                    animation: 0,
                    animation: 0,
                    group: {
                        name: "description",
                        pull: 'clone',
                        put: false
                    },
                    ghostClass: "ghost",
                };
            },
            dragOptionsLeft() {
                return {
                    animation: 0,
                    group: {
                        name: "description",
                        pull: 'clone',
                    },
                };
            },
            //筛选队伍结果
            teamListResult() {
                let list = JSON.parse(JSON.stringify(this.teamList))
                return list.filter((item) => {
                    let findIndex = this.groupList.findIndex((obj) => {
                        return [obj.teamLeaderNumber, obj.teamMemberNumber].includes(item.teamNumber)
                    })
                    return this.isSwitch ? findIndex == -1 : true
                }).map((item)=>{
                    return {
                        ...item,
                        leftInfo:this.getLeftInfo(item)
                    }
                })
            },
            //成功组队结果
            successGroupList() {
                return this.groupList.filter(obj => obj.teamLeaderNumber && obj.teamMemberNumber)
            },
            //队伍列表参数
            params(){
                return this.$utils.getObjectValues(this,'competitionId,teamNumber');
            },
        },

已应用到某大型活动中:
案例功能：右边拖动到左边俩俩组队，撤销组队，统计组队，上传/清除/搜索队伍等等…