Vue中实现鼠标拖拽排序

一、实现效果

二、实现要点

1、HTML draggable 属性：draggable 属性规定元素是否可拖动

2、在拖动时获取拖动元素的唯一ID，获取拖动的元素进入有效的放置目标时的ID和下标

3、通过获取到的下标和ID，对两个元素的位置进行交换，改变原数组的排列顺序

三、代码

HTML

<el-checkbox-group style="display: flex;flex-wrap: wrap" v-model="checkList">
   <div style="margin-left: 10px" v-for="dragItem in dragDivList" :key="dragItem.id"
        :draggable="dragItem.id === 'nullAssigneeResolver' ? false : true"
        @dragenter="dragenter(dragItem.id,i,index)"
        @dragstart="dragstart(dragItem.id,i,index)">
        <!--我这里对最后一个元素默认了不能移动-->
       <el-checkbox :disabled="dragItem.id === 'nullAssigneeResolver' ? true : false" :label="dragItem.id">{{ dragItem.name }}</el-checkbox>
   </div>
</el-checkbox-group>

json数据

'dragDivList': [
    { 'id': 'historicAssigneeResolver', 'name': '历史记录优先' },
    { 'id': 'followAssigneeResolver', 'name': '岗位指定' },
    { 'id': 'pollPatternAssigneeResolver', 'name': '轮询模式' },
    { 'id': 'assignAssigneeResolver', 'name': '业务指定' },
    { 'id': 'nullAssigneeResolver', 'name': '认领模式' },
],

dragstart

// 获取到当前移动元素的id保存起来
// 在交换位置时不能使用下标，因为移动的过程中在交换位置，下标是随时在变得
dragstart (id,i,index) {
    this.currentStart = id;
    console.log(index,i);
},

dragenter

// 这里根据实际业务需求进行处理即可，我这儿存在多层嵌套，所以需要的东西较多
dragenter (id,i,index) {
    this.currentEnd = id;
    // 需要根据id找到当前的下标位置
    const startIndex = this.paramsConfig.formConfig[i].rulesNodeDTOList[index].dragDivList.findIndex( item =>{
        return item.id === this.currentStart;
    });
    const endIndex = this.paramsConfig.formConfig[i].rulesNodeDTOList[index].dragDivList.findIndex( item =>{
        return item.id === this.currentEnd;
    });
    // 对数据进行位置交换
    const arr = this.moveList(this.paramsConfig.formConfig[i].rulesNodeDTOList[index].dragDivList, startIndex, 'swap', endIndex);
    const nullAssigneeResolverIndex = arr.findIndex(item=>{
        return item.id === 'nullAssigneeResolver';
    });
    // 如果把最后一个挪动了，就要return掉
    if (nullAssigneeResolverIndex!==4){
        return;
    }
    // 获取到的新数组替换老数组
    this.$set(this.paramsConfig.formConfig[i].rulesNodeDTOList[index],'dragDivList',arr);
},

moveList---封装的数据位置交换方法（可参考：数组元素移动----起始位置、末尾、前移、后移、交换位置）

moveList (enteArr, index, upDown, swapIndex = index + 1) {
    const arr = JSON.parse(JSON.stringify(enteArr));
    if (upDown === 'up') {
        arr.splice(index - 1, 0, arr[index]);
        arr.splice(index + 1, 1);
    } else if (upDown === 'down') {
        arr.splice(index + 2, 0, arr[index]);
        arr.splice(index, 1);
    } else if (upDown === 'start') {
        arr.splice(0, 0, arr[index]);
        arr.splice(index + 1, 1);
    } else if (upDown === 'end') {
        arr.splice(arr.length, 0, arr[index]);
        arr.splice(index, 1);
    } else if (upDown === 'swap') {
        arr[swapIndex] = arr.splice(index, 1, arr[swapIndex])[0];
    }
    return arr;
},