Vue.draggable的学习

Vue.draggable的学习

什么是vue.draggable插件？由于楼主也是初接触，个人觉得官网的描述挺容易理解的，下面来看看来官网描述以及做一个简单的学习总结。

官网描述：Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作，总之是一款非常优秀的vue拖拽组件。

官方网站：

https://github.com/SortableJS/Vue.Draggable

1、安装

1. 使用yarn安装

   yarn add vuedraggable
   

2. 使用npm安装

   npm install vuedraggable --save
   

2、引入

1. CDN方式引入

   vuedraggable是一款基于Sortable.js的vue组件，所以需要先引入Sortable.js

   <script src="http://www.itxst.com/package/vue/vue.min.js"></script>
   <script src="http://www.itxst.com/package/sortable/Sortable.min.js"></script>
   <script src="http://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>
   

2. vue文件引入

    import draggable from 'vuedraggable'
    export default {
   	components: {
   		draggable: draggable
   	}
   }
   

3、基本实现

​ 基本参数解析：

• value

  用于实现拖拽的list，通常和内部v-for循环的数组为同一数组。 最好使用vuex来实现传入。 不是直接使用，而是通过v-model引入。

• animation

  动画的持续时间，单位毫秒，默认为0

<template>
<fieldset>
	<legend>测试拖拽</legend>
    <draggable 
    v-model="list" 
    animation="500"
    >
      <div v-for="(item , index) in list" :key="index">
        {{item.name}}
      </div>
    </draggable>
    </fieldset>
</template>
<script>
import draggable from 'vuedraggable'
export default {
	components: {
		draggable: draggable
	},
	data(){
		return {
			list: [
          	{
            	group: "list",
            	name: "第一"
          	},
          	{
            	group: "list",
            	name: "第二"
          	},
          	{	
           	 	group: "list",
            	name: "第三"
          	},	
          	{
           	 	group: "list",
            	name: "第四"
          	},	
        	]
		}
	}
}
</script>

4、拖拽事件

格式：

<draggable 
@start="onstart"
@end="onEnd"
:move="onMove"
>
</draggable>

函数名称	函数描述
setData	设置值时的回调函数
choose	选择单元时的回调函数
start	开始拖动时的回调函数
end	拖动结束时的回调函数
add	添加单元时的回调函数
update	排序发生变化时的回调函数
remove	单元被移动到另一个列表时的回调函数
filter	尝试选择一个被filter过滤的单元的回调函数
move	移动单元时的回调函数
clone	clone时的回调函数
unchoose	选中后松开鼠标的事件
sort	位置变化时事件

函数对象的属性：

5、插槽

存在一个footer插槽，在排序列表之下。永远位于最下方。

<draggable 
    v-model="list" 
    animation="500"
    >
	<button slot="footer">点击</button>
</draggable>

6、属性列表

• group：设置不同的拖拽分组，用于实现不同数组之间的相互拖拽。同一分组之间可以实现相互拖动。不同的分组不能拖拽互通。

• delay：设置响应时间，即鼠标摁下持续一定时间后才会触发拖拽行为，单位毫秒，且默认为0，点击即可拖拽（delay：1000表示鼠标按下一秒以后才可以拖动，用于防止误操作）

• disable：设置是否允许拖拽，true——开启拖动，false——禁止拖动

• scroll：设置是否允许滚动，当需要将元素拖动至隐藏的区域时（带有滚动条时，未显示的区域即为隐藏的区域），就得使用该属性，默认为true（允许滚动）

• animation：设置过渡效果，避免拖拽行为过于生硬。单位毫秒，默认为0。

• handle：设置可拖动的元素，即可调整响应拖拽行为的因素为列表中的某一元素，当点击该元素时才会触发拖动，其它元素均不起效。（值为元素对应的类名：handle=".className"）

• filter：和handle相反，该属性用于设置不能响应拖拽的元素或者对象。（值为元素对应的类名：filter=".className"同时子元素：class=“className”）

• chooseClass：选中时的样式，即触发选中时该项的样式。

• ghostClass：设置位符样式，与chooseClass类似

• clone：拷贝拖拽，列表从一个拖拽组移动到另一拖拽组时，原来的组的元素不移除。（一般写在option中）

  <draggable
  :option="{group:{name:'', pull: 'clone'}}"
  >
  </draggable>
  

• element：设置标签在渲染后展现出来的标签类型，默认为div

• options：配置项（大部分配置的集合，以上属性皆可写在其内部）

  • group：分组

  • sort：定义是否可以拖拽

  • delay：鼠标开始拖动的延迟时间

<draggable
:option="{group:{name:'', pull: 'clone'}}"
>
</draggable>

• element：设置标签在渲染后展现出来的标签类型，默认为div

• options：配置项（大部分配置的集合，以上属性皆可写在其内部）

  • group：分组

  • sort：定义是否可以拖拽

  • delay：鼠标开始拖动的延迟时间

    …