一、简介
vue拖拽插件
二、基本使用
安装
npm install vuedraggable
引入
import draggable from 'vuedraggable'
基础用法
定义一个json串 list，实现它的拖拽排序。
<template>
<div>
<!-- 调用组件 -->
<draggable element="ul" v-model="list">
<li v-for="(item, index) in list" :key='index'>{{item.name}}</li>
</draggable>
</div>
</template>
<script>
// 引入拖拽组件
import draggable from 'vuedraggable'
export default {
name: 'demo',
components: {
// 注册组件
draggable
},
data () {
return {
list: [
{
id: 1,
name: '1'
},
{
id: 2,
name: '2'
},
{
id: 3,
name: '3'
},
{
id: 4,
name: '4'
},
{
id: 5,
name: '5'
},
{
id: 6,
name: '6'
}
]
}
}
}
</script>
三、组件文档
1、属性
value：Array
用于实现拖拽的list，通常和内部v-for循环的数组为同一数组。
list：Array
和v-model不能共用，和v-model使用方式相同。
element：String，默认div
标签在渲染后展现出来的标签类型，包含拖动列表和插槽的外部标签。
clone：String,
为true时克隆，否则移动。
move:function
拖拽项时调用的函数，用来确定拖拽是否生效，返回null时可以生效，可以通过函数判断。
有一个参数:event ：object
- draggedContext: 被拖拽元素的上下文
- index: 拖拽元素的指针
- element: 拖拽数据本身
- futureIndex: 拖动后的index
- relatedContext: 拖入区域的上下文
- index: 目标元素的index
- element: 目标数据本身
- list: 拖入的列表
- component: 目标组件
componentData：Object,默认值:null
用来结合UI组件的，可以自定义props属性和on事件
示例 ：
<draggable element="el-collapse" :list="list" :component-data="getComponentData()">
<el-collapse-item v-for="e in list" :title="e.title" :name="e.name" :key="e.name">
<div>{{e.description}}</div>
</el-collapse-item>
</draggable>
methods: {
handleChange () {
console.log('change')
},
inputChange (value) {
this.active = value
},
getComponentData () {
return {
on: {
change: this.handleChange,
input: this.inputChange
},
props: {
value: this.active
}
}
}
options：Object，配置项,就是sortable.js的props
例如，可以使用这个绑定添加一个拖动句柄:options="{handle:'.handle'}"。
- group：string or object
- string：命名，用处是为了设置可以拖放容器时使用，在array中的put的设置中再做介绍；
- object：{name,pull,put}
- name：同string的方法
- pull：pull用来定义从这个列表容器移动出去的设置true/false/'clone'/function true:列表容器内的列表单元可以被移出； false：列表容器内的列表单元不可以被移出； 'clone'：列表单元移出，移动的为该元素的副本； function：用来进行pull的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否移出；
- put：put用来定义往这个列表容器放置列表单元的的设置，true/false/['foo','bar']/function true:列表容器可以从其他列表容器内放入列表单元； false：与true相反； ['foo','bar']：这个可以是一个字符串或者是字符串的数组，代表的是group配置项里定义的name值； function：用来进行put的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否放入；
- sort：boolean 定义是否列表单元是否可以在列表容器内进行拖拽排序；
- delay：number 定义鼠标选中列表单元可以开始拖动的延迟时间；
- disabled：boolean 定义是否此sortable对象是否可用，为true时sortable对象不能拖放排序等功能，为false时为可以进行排序，相当于一个开关；
- animation：number 单位：ms，定义排序动画的时间；
- handle：selector 格式为简单css选择器的字符串，使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动；
- filter：selector 格式为简单css选择器的字符串，定义哪些列表单元不能进行拖放，可设置为多个选择器，中间用“，”分隔；
- draggable：selector 格式为简单css选择器的字符串，定义哪些列表单元可以进行拖放
- ghostClass：selector 格式为简单css选择器的字符串，当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况，此配置项就是来给这个影子单元添加一个class，我们可以通过这种方式来给影子元素进行编辑样式；
- chosenClass：selector 格式为简单css选择器的字符串，当选中列表单元时会给该单元增加一个class；
- forceFallback：boolean 如果设置为true时，将不使用原生的html5的拖放，可以修改一些拖放中元素的样式等；
- fallbackClass：string 当forceFallback设置为true时，拖放过程中鼠标附着单元的样式；
- scroll：boolean 默认为true，当排序的容器是个可滚动的区域，拖放可以引起区域滚动
2、事件
事件列表：
- choose：function 列表单元被选中的回调函数
- start：function 列表单元拖动开始的回调函数
- end：function 列表单元拖放结束后的回调函数
- add：function 列表单元添加到本列表容器的回调函数
- update：function 列表单元在列表容器中的排序发生变化后的回调函数
- remove：function 列表元素移到另一个列表容器的回调函数
- filter：function 试图选中一个被filter过滤的列表单元的回调函数
- move：function 当移动列表单元在一个列表容器中或者多个列表容器中的回调函数
- clone：function 当创建一个列表单元副本的时候的回调函数
事件参数（事件对象）：上面列出的事件都会有这么一个对象
事件对象在各个函数中略有不同，可通过输出对象查看对象的属性，下面简单列举几个：
- to：HTMLElement--移动到列表容器
- from：HTMLElement--来源的列表容器
- item：HTMLElement--被移动的列表单元
- clone：HTMLElement--副本的列表单元
- oldIndex：number/undefined--在列表容器中的原序号
- newIndex：number/undefined--在列表容器中的新序号
3、插槽
提供一个footer插槽，在排序列表之下，永远位于最下方。
<draggable v-model="myArray" :options="{draggable:'.item'}">
<div v-for="element in myArray" :key="element.id" class="item">
{{element.name}}
</div>
<button slot="footer" @click="addPeople">Add</button>
</draggable>
