draggable实现拖拽、禁止拖拽、拖拽后元素重新排序到指定位置

拖拽、禁止拖拽、拖拽后元素重新排序到指定位置"/>

draggable实现拖拽、禁止拖拽、拖拽后元素重新排序到指定位置

前言

draggable的github地址

// 安装
npm install vuedraggable
// 引入
import draggable from 'vuedraggable'

实现拖拽

// 拖拽组件
<draggableclass="components-draggable":list="item.list":group="{ name: 'componentsGroup'}"draggable="ponents-list":sort="false":move="onMove"@end="onEnd"
><li class="components-list" v-for="(item, index) in list" :key="index"><div class="components-body">{{item.label}}</div></li>
</draggable>
// 数据
list: [{label: '组件1',value: 0},{label: '组件2',value: 1}
],
// 拖拽区域
<draggable :list="drawList" :animation="300" @end="onDrawEnd" group="componentsGroup"<li class="components-list" v-for="(item, index) in drawList" :key="index"><div class="components-body">{{item.label}}</div></li>
</draggable>
// 数据
drawList: [],

禁止拖拽

// 拖拽时，校验是否已存在，禁止拖拽
onMove(e) {// 判断-是否已存在let arr = this.drawList.filter(item => {return item.value === 0})// 符合条件返回false，否则返回trueif(e.draggedContext.element.value === 0 && arr.length){return false}return true
}

拖拽后元素重新排序到指定位置

// 限制：【组件1】始终排列在第一位
onEnd(){for (var i = 0; i < this.drawList.length; i++) {// 排序-组件1排第一位if(this.drawList[i].value === 0 && i !== 0){this.drawList[0] = this.drawList.splice(i, 1, this.drawList[0])[0];}}
}

关联文章

Vue.Draggable使用文档总结
js 实现数组元素交换位置