前言

draggable的github地址

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

实现拖拽

javascript">// 拖拽组件
<draggable
	class="components-draggable"
	:list="item.list"
	:group="{ name: 'componentsGroup'}"
	draggable=".components-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: [],

禁止拖拽

javascript">// 拖拽时，校验是否已存在，禁止拖拽
onMove(e) {
	// 判断-是否已存在
  let arr = this.drawList.filter(item => {
    return item.value === 0
  })

  // 符合条件返回false，否则返回true
  if(e.draggedContext.element.value === 0 && arr.length){
  	return false
  }
  return true
}

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

javascript">// 限制：【组件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 实现数组元素交换位置