vue实现拖拽

vue实现拖拽

1.安装awe-dnd

npm install awe-dnd (yarn add awe-dnd)

2.在main.js中，通过Vue.use导入插件

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

3.在需要拖拽的地方加入class=‘color-item’

tags:[
     {name:'首页'},
     {name:'你好'},
     {name:'小白'},
     {name:'小黑'},
],

4.实现拖拽

<template>
  <div class="">
     <el-tag
		 style="width:auto"
		 class="color-item"
		 v-for="(tag,index) in tags"
		 v-dragging="{ item: tag, list: tags, group: 'tag' }" //拖拽主要代码
		 :key="index"
		 closable
		 :type="tag.type"
		 @close="handleBqClose(tag)"
		 @click="tiao(tag,index)"
		 effect="dark"
		 >
		 <span>{{tag.name}}</span>
	</el-tag>
  </div>
</template>

详情：Vue拖拽