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

展开阅读全文
©️2020 CSDN 皮肤主题: 游动-白 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值