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

一、前言

Vue是一种用于构建用户界面的JavaScript框架。它是一种轻量级的框架，旨在简化应用的开发过程。Vue提供了一种基于组件的开发模式，使开发者能够将应用程序分解为单个可复用的组件，并将这些组件组合起来以构建完整的应用程序。

Vue具有以下特点：

1. 响应式：Vue使用了一种响应式的数据绑定机制，当数据发生变化时，相关的界面会自动更新。这极大地简化了状态管理和数据更新的过程。
2. 组件化：Vue允许开发者将应用程序拆分为多个小组件，并通过组合这些组件来构建复杂的应用程序。每个组件都有自己的模板、样式和逻辑，使组件的复用和维护变得更加容易。
3. 虚拟DOM：Vue使用了虚拟DOM来提高性能。当数据发生变化时，Vue会通过比较虚拟DOM的差异来更新实际的DOM，这样可以减少直接操作实际DOM带来的性能损耗。
4. 插件系统：Vue具有丰富的插件系统，可以通过插件来扩展其功能。开发者可以使用现有的插件，或者根据自己的需求来开发自定义插件。
5. 易于学习和使用：Vue的语法简洁明了，学习曲线较为平缓。它的文档也非常完善，提供了大量的示例和教程，帮助开发者迅速上手。

// 安装
npm install vuedraggable
// 引入
import draggable from 'vuedraggable'
1
2
3
4

二、实现拖拽

// 拖拽组件
<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: [],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

三、禁止拖拽

// 拖拽时，校验是否已存在，禁止拖拽
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
}
1
2
3
4
5
6
7
8
9
10
11
12
13

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

// 限制：【组件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];
	  }
	}
}
1
2
3
4
5
6
7
8
9

五、相关文章

draggable的github地址
el-tabs事件绑定（Element UI）
Element UI resetFields与clearValidate方法
Vue resize监听窗口变化
vue监听滚动事件 实现某元素随着滚动条滚动固定距离顶部的某个位置（元素的top值实时变化）
Element-UI 日期选择器-时间范围控制
vue iframe 宽高自适应
Vue.Draggable使用文档总结
js 实现数组元素交换位置