一、实现效果
二、实现要点
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;
},