vue拖拽组件awe-dnd使用方法简述及参数说明

安装组件

应用实例及参数说明

实现效果

代码

参数说明

做拖拽的时候搜到这个小组件简单易用记录一下

官方文档：点击此处

安装组件

很简单啊先控制台安装

npm install awe-dnd --save

然后去main.js里引用

import VueDND from 'awe-dnd'
Vue.use(VueDND)

应用实例及参数说明

用官方文档给的数据写的实例，因为文档说的也不是很细致，所有的参数说明是我自行理解的

有不对的地方还请大佬指正

先新建个简单的vue项目，为了方便体现就直接在home页写了

实现效果

代码

要注意一点：这种遍历出来的元素一定要写key值，不然组件不生效

<template>
	<div class="home">
		<div class="label">
			<p v-for="(item,index) in colors" :key="index">{
   
   {item}}</p>
		</div>
		<div class="goods">
			<div class="list" v-for="(item,index) in colors" :key="index" 
				v-dragging="{ item: item, list: colors, group: 'item',otherData:'whatever u want', comb: 'isComb'}" >
				{
   
   {item}}
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Home',
		data() {
			return {
                list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
//用来拖拽的元素数据
				colors: ["Aquamarine","Hotpink","Gold","Crimson","Blueviolet","Lightblue","Cornflowerblue","Skyblue","Burlywood"]
			}
		},
		mounted() {
//官方文档给的拖拽中事件
			this.$dragging.$on('dragged', ({
				value
			}) => {
				console.log(value.item)
				console.log(value.list)
				console.log(value.otherData)
				console.log(value.comb);
			})
//官方文档给的拖拽完成事件
			this.$dragging.$on('dragend', (v) => {
				console.log(v);
			})
//给元素上色
			document.querySelectorAll(".list").forEach((item,index)=>{
				item.setAttribute('style','background-color:'+item.innerHTML+';')
			})
		}，
//动态上色，每次update都会更新
updated() {
			document.querySelectorAll(".list").forEach((item,index)=>{
				item.setAttribute('style','background-color:'+item.innerHTML+';')
			})
		}
	}
</script>

<style scoped="scoped">
	.home {
		display: flex;
		flex-direction: row;
		justify-content: center
	}
	.label{
		font-size:large;
	}
	.label>p{
		height: 30px;
		border: 1px dashed #42B983;
		margin: 10px 50px;
		line-height: 30px;
	}
	.list {
		height: 30px;
		width: 200px;
		margin: 12px 10px;
		line-height: 30px;
	}
</style>

参数说明

先说说写在dom元素里的参数吧

v-dragging="{ item: item, list: colors, group: 'item',otherData:'whatever u want', comb: 'isComb'}"

item：遍历后需要拖拽功能的元素；

list：提供遍历元素的数据；

group：文档说“unique key of dragable list”即拖拽列表的独特key值,例如我这里给的是’item'，在dragend事件里打印出来就是一个‘item’字符串，但如果我给了index，在dragend事件里打印出来就是一个{group:你拖拽的元素的index值}这样一个对象,但是拖拽功能会失效；

comb：文档说“use for multi drag”即用于多种拖拽，没发现什么功效，写什么事件里就打印什么；

otherData：经过尝试，可以是vue实例里的指定数据或者是指定的字符串，例如我这里写的'whatever u want'，draged事件就打印这个字符串，如果我写的是data里的list，就会在draged事件里打印出list数组来