这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
可拖拽表单vuedraggable
vuedraggable 是基于Sortable.js 的 vue 组件库，没有 jQuery 依赖，可以实现视图和数据模型同步更新，并且拥有丰富的 API。
基本用法
<template>
<draggable
class="list-group"
tag="ul"
v-model="list"
v-bind="{
animation: 200,
group: 'description',
disabled: false,
ghostClass: 'ghost'
}"
>
<li class="list-group-item" v-for="element in list" :key="element.order">
{{ element.name }}
</li>
</draggable>
</template>
<script>
import Draggable from 'vuedraggable';
const message = [
'vue.draggable',
'draggable',
'component',
'for',
'vue.js 2.0',
'based',
'on',
'Sortablejs',
];
export default {
components: {
Draggable,
},
data() {
return {
list: message.map((name, index) => {
return { name, order: index + 1 };
}),
};
},
};
</script>
<style lang="scss">
.ghost {
opacity: 0.5;
background: #c8ebfb;
}
.list-group {
min-height: 20px;
list-style: none;
}
.list-group-item {
cursor: move;
height: 30px;
line-height: 30px;
border: 1px solid #ccc;
}
</style>
v-model 绑定列表可拖动元素，通常与内部元素 v-for 引用的数组相同。
v-bind 绑定组件的配置项，与 Sortable.js 的配置项相同，下面具体讲解：
-
group
：string or object
-
string：命名，用处是为了设置可以拖放容器时使用
-
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 来判断是否放入
-
-
-
animation: number 单位：ms，定义动画的时间；
-
disabled: boolean 定义此 sortable 对象是否可用，为 true 时 sortable 对象不能拖放排序等功能，为 false 时为可以进行排序，相当于一个开关；
-
ghostClass：selector 格式为简单 css 选择器的字符串，当拖动列表元素时会生成一个副本作为影子元素来模拟被拖动元素排序的情况，此配置项就是来给这个影子元素添加一个 class，我们可以通过这种方式来给影子元素进行编辑样式；
-
sort: boolean 定义是否列表元素是否可以在列表容器内进行拖拽排序；
-
delay: number 定义鼠标选中列表元素可以开始拖动的延迟时间；
-
handle: selector 格式为简单 css 选择器的字符串，使列表元素中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表元素进行拖动；
-
filter: selector 格式为简单 css 选择器的字符串，定义哪些列表元素不能进行拖放，可设置为多个选择器，中间用“,”分隔
-
draggable：selector 格式为简单 css 选择器的字符串，定义哪些列表元素可以进行拖放
-
chosenClass：selector 格式为简单 css 选择器的字符串，当选中列表元素时会给该元素增加一个 class；
-
forceFallback：boolean 如果设置为 true 时，将不使用原生的 html5 的拖放，可以修改一些拖放中元素的样式等；
-
fallbackClass：string 当 forceFallback 设置为 true 时，拖放过程中鼠标附着元素的样式；
-
scroll：boolean 默认为 true，当排序的容器是个可滚动的区域，拖放可以引起区域滚动
效果：
事件
拖拽组件提供了如下事件：
- onChoose：列表元素被选中的回调函数
- onStart：列表元素拖动开始的回调函数
- onEnd：列表元素拖放结束后的回调函数
- onAdd：列表元素添加到本列表容器的回调函数
- onUpdate：列表元素在列表容器中的排序发生变化后的回调函数
- onRemove：列表元素移到另一个列表容器的回调函数
- onFilter：试图选中一个被 filter 过滤的列表元素的回调函数
- onMove：当移动列表元素在一个列表容器中或者多个列表容器中的回调函数
- onClone：当创建一个列表元素副本的时候的回调函数
事件对象：
（事件对象在各个函数中略有不同，可通过输出对象查看对象的属性，下面简单列举几个：）
- to：HTMLElement--移动到列表容器
- from：HTMLElement--来源的列表容器
- item：HTMLElement--被移动的列表元素
- clone：HTMLElement--副本的列表元素
- oldIndex：number/undefined--在列表容器中的原序号
- newIndex：number/undefined--在列表容器中的新序号
