vuedraggable插件使用总结

vuedraggable插件使用总结

【1】 需求：一个list内，div元素上下拖动某个地方交换位置，且拖动时div元素带有样式，预拖动位置出现虚线边框；
【2】经历：由于没写过前端，未遇过拖拽需求，被别人推荐使用draggable插件，摸索了一天才实现效果；
【3】资源：vuedraggable插件：https://sortablejs.github.io/Vue.Draggable/
官网例子：https://david-desmaisons.github.io/draggable-example/
【4】用到的draggable属性及方法：

• 属性：

list: 'listData' //绑定拖动数组，这样拖动时，数组内可自动变化，也可用v-model，二者选其一
animation:300 //单位ms,指拖动元素结束所用的动画时间
handle: '.dragHandle'//选择器名称,只能通过拖动此处拖动才生效
ghostClass:'ghostClass'//影子类,指拖动过程中产生的跟拖动元素一模一样的影子元素，这里我主要通过该属性来设置预占位，注意，此处的选择器不加‘.’哦
dragClass:'dragClass' //通过添加该类设置元素在拖动过程中的样式等，我这里必须要设置该类，否则区分不出拖动过程中元素的样式和影子类预占位，注意，此处的选择器不加‘.’哦
chosenClass:'chosenClass'//欲拖动时所选中的元素，通过添加该类，可设置选中元素时的样式等，注意，此处的选择器不加‘.’哦
forceFallback: true,  // 设置为true,可忽略原生html的拖动，比如一个标签使用html原生属性draggable为true,并设置dragstart和drop函数，这里的拖动不会走drop函数

• 方法

start:拖动开始
end:拖动结束
move:拖动过程中
其中拖动事件event中用到的参数：
oldIndex：拖动后拖动元素的新序号,这里用来对拖动后的位置进行激活高亮

【5】代码

先引入
import Draggable from 'vuedraggable'

components:{
     
	Draggable
}
再使用
 <draggable :list="listData" :options="{ animation: 300,ghostClass:'ghostClass' ,dragClass:'dragClass',chosenClass='chosenClass'}" :forceFallback="true" @end="dragItemEnd" class="draggable-suggestion">
    <div v-for="(item, index) in listData" :class="{isActive:selectItem==index}" class="draggable-suggestion__item"
              :key="index">
             <el-form v-model="item">
             	<el-from-item label="名称">
             		<el-input v-model="item.name"></el-input>
             	</el-from-item>
             	...
             </el-form>
    </div>
 </draggable>
 js代码部分
 data(){
     
 	return{
     
 		selectItem:0,
 		listData:[]
 	}
 },
 methods:{
     
	dragItemEnd(event){
     
		this.selectItem = event.newIndex;
	}
 }
 样式代码:贴出了部分
 <style>
 	.ghostClass{
     
 		border:1px dashed green;
 		width:100%;
 		height:56px;
 		opacity:0.5;
	}
	.dragClass,.chosenClass{
     
		border:1px solid green;
 		width:100%;
 		height:56px;
	}
	.draggable-suggeation{
     
		&__item{
     
			dispaly:flex;
			...
		}
		&.isActive{
     
			border:1px solid green;
 			background-color:#F0F8FF;
		}
	}
 </style>

【6】总结

• 多看官网例子及对应代码熟悉属性含义及方法，才能少走弯路，插件功能很强大，需要的功能有时增加一个属性就能解决；
• 本篇没有效果图，请见谅，等有时间了加一个哈

【7】求生欲
作为一个没有计算机基础的前端菜鸟小白，刚接触前端不到一年，不懂的术语和知识技能还有很多，全篇所用语言均白话，如果有理解的不到位，代码写的不到位，使用方式不到位的地方，还请各位大佬多多批评指教；