Draggable为基于Sortable.js的vue组件,用以实现拖拽功能。
npm install vuedraggable
import draggable from 'vuedraggable'
定义一个json串 list
,实现它的拖拽排序。
<template>
<div>
<draggable element="ul" v-model="list">
<li v-for="item in list">{{item.name}}li>
draggable>
{{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>
Array,非必须,默认为null
v-model
引入。<draggable v-model="myArray">
Array,非必须,默认为null
value
的替代品。v-model
不能共用String,默认div
标签在渲染后展现出来的标签类型Object
filter
时是否触发event.preventDefault()
默认触发data-id
函数配置
function,默认值: 无处理
options
的group
项的pull
项处理,当pull:'clone
时的拖拽的回调函数’true
时克隆function,默认值:null
evt
evt
为object<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')
}
}
Object,默认值:null
props
和on
props
用来代理UI组件需要绑定的属性(:)on
用来代理UI组件需要绑定的事件(@)<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">Addbutton>
draggable>