vuedraggable拖拽组卷在vue中的基础使用

简单的记录一下vuedraggable拖拽组件的基础使用

话不多说直接上代码

一、通过npm安装组件

npm install vuedraggable

二、在页面中的注册以及基础使用 

①直接使用

<template>
	<div>
		<draggable>
			<div v-for="item in myArray">{{item.name}}</div>
		</draggable>
	</div>
</template>

<script>
	import draggable from 'vuedraggable'
	export default {
		data() {
			return {
				myArray: [{
					name: '我的'
				}, {
					name: '你的'
				}],
			}
		},
		components: {
			draggable
		},
		methods: {

		}
	}
</script>

 ②采用组的形式

<template>
	<div>
		<draggable v-model="myArray">
			<transition-group>
				<div v-for="(item,index) in myArray" :key="index"
					style="height: 100px;margin-top: 10px;background-color: pink;">{{item.name}}</div>
			</transition-group>
		</draggable>
	</div>
</template>

<script>
	import draggable from 'vuedraggable';
	export default {
		data() {
			return {
				myArray: [{
					name: 1
				}, {
					name: 2
				}, {
					name: 3
				}, {
					name: 4
				}]
			}
		},
		components: {
			draggable
		},
		methods: {


		}
	}
</script>

以上代码就可以实现一个简单的拖拽排序

二、如果是对层级的数组实现拖拽，实现原理则相同，话不多说直接上代码

<template>
	<div>
		<draggable v-model="myArray">
			<transition-group>
				<div v-for="(item,index) in myArray" :key="index"
					style="margin-top: 10px;background-color: pink;padding: 0 50px;">
					<div style="line-height: 100px;font-weight: 700;">{{item.name}}</div>
					<draggable v-model="item.children">
						<transition-group>
							<div v-for="(a,b) in item.children" :key='b'
								style="line-height: 30px;background-color: aqua;margin-top: 10px;">{{a.name}}</div>
						</transition-group>
					</draggable>
				</div>
			</transition-group>
		</draggable>
	</div>
</template>

<script>
	import draggable from 'vuedraggable';
	export default {
		data() {
			return {
				myArray: [{
					name: '我的',
					children: [{
						name: 1
					}, {
						name: 2
					}, {
						name: 3
					}]
				}, {
					name: '你的',
					children: [{
						name: 4
					}, {
						name: 5
					}, {
						name: 6
					}]
				}]
			}
		},
		components: {
			draggable
		},
		methods: {


		}
	}
</script>

<

三、如果在拖拽的开始和拖拽放下后需要进行逻辑处理，或者触发其他事件等等，则可以通过绑定事件，@dragstart（拖拽开始）   @dragend（拖拽放下），由于层级问题，子容器拖拽事件会触发父容器事件，则需要阻止事件的冒泡.stop话不多说直接上代码

<template>
	<div>
		<draggable v-model="myArray">
			<transition-group>
				<div v-for="(item,index) in myArray" :key="index"
					style="margin-top: 10px;background-color: pink;padding: 0 50px;" @dragend="outerDragend()"
					@dragstart="outerDragstart()">
					<div style="line-height: 100px;font-weight: 700;">{{item.name}}</div>
					<draggable v-model="item.children">
						<transition-group>
							<div v-for="(a,b) in item.children" :key='b' @dragend.stop="innerDragend()"
								@dragstart.stop="innerDragstart()"
								style="line-height: 30px;background-color: aqua;margin-top: 10px;">{{a.name}}
							</div>
						</transition-group>
					</draggable>
				</div>
			</transition-group>
		</draggable>
	</div>
</template>

<script>
	import draggable from 'vuedraggable';
	export default {
		data() {
			return {
				myArray: [{
					name: '我的',
					children: [{
						name: 1
					}, {
						name: 2
					}, {
						name: 3
					}]
				}, {
					name: '你的',
					children: [{
						name: 4
					}, {
						name: 5
					}, {
						name: 6
					}]
				}]
			}
		},
		components: {
			draggable
		},
		methods: {
			// 外层放下
			outerDragend() {
				console.log('外层放下')
			},
			// 外层开始
			outerDragstart() {
				console.log('外层开始')
			},
			// 内层开始
			innerDragstart() {
				console.log('内层开始')
			},
			// 内层放下
			innerDragend() {
				console.log('内层放下')
			},
		}
	}
</script>

以上代码可实现基础的拖拽功能以及事件处理

文档可参考（https://www.itxst.com/vue-draggable/tutorial.html）