Vue.Draggable学习总结 Draggable为基于Sortable.js的vue组件,用以实现拖拽功能。
特性 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 和视图模型同步刷新 和vue2的国度动画兼容 支持撤销操作 当需要完全控制时,可以抛出所有变化 可以和现有的UI组件兼容 安装 npm install vuedraggable 1 引入 import draggable from 'vuedraggable' 1 基础用法 定义一个json串 list,实现它的拖拽排序。
<template>
<div>
<!-- 调用组件 -->
<draggable element="ul" v-model="list">
<li v-for="item in list">{{item.name}}</li>
</draggable>
<!-- 输出list数据 -->
{{list}}
</div>
</template>
<script>
// 引入拖拽组件
import draggable from 'vuedraggable'
export default {
name: 'demo',
components: {
//调用组件
draggable,
},
data () {
return {
list:[
{
id: 1,
name: 'a'
},
{
id: 2,
name: 'b'
},
{
id: 3,
name: 'c'
},
{
id: 4,
name: 'd'
},
{
id: 5,
name: 'e'
},
{
id: 6,
name: 'f'
},
]
}
</script>
用于实现拖拽的list,通常和内部v-for循环的数组为同一数组。 最好使用vuex来实现传入。 不是直接使用,而是通过v-model引入。
<draggable v-model="myArray">
就是value的替代品。 和v-model不能共用 从表现上没有看出不同
就是<draggable>标签在渲染后展现出来的标签类型 也是包含拖动列表和插槽的外部标签 可以用来兼容UI组件
配置项
函数配置
options
的group
项的pull
项处理,当pull:'clone
时的拖拽的回调函数’
true
时克隆
<draggable element="ul" v-model="list" :move='allow'>
...
methods: {
allow(evt) {
console.log(evt.draggedContext.index)
console.log(evt.draggedContext.element)
console.log(evt.draggedContext.futureIndex)
console.log(evt.relatedContext.index)
console.log(evt.relatedContext.element)
console.log(evt.relatedContext.list)
console.log(evt.relatedContext.component)
return (evt.draggedContext.element.name!== 'b')
}
}
<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('changed');
},
inputChanged(value) {
this.activeNames = value;
},
getComponentData() {
return {
on: {
change: this.handleChange,
input: this.inputChanged
},
props: {
value: this.activeNames
}
};
}
}
start, add, remove, update, end, choose, sort, filter, clone
参数带有如下属性:
提供一个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>