官网地址：
https://www.npmjs.com/package/vuedraggable
https://github.com/SortableJS/Vue.Draggable
效果：https://sortablejs.github.io/Vue.Draggable/#/custom-clone
Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。
一.安装
npm i -S vuedraggable
或者引入：
二.使用
1.场景：单个列表内部简单的拖拽（不克隆）
<template>
<div class="twoPage">
<draggable :list="list" :disabled="!enabled" class="list-group" ghost-class="ghost"
:move="checkMove" @start="dragging = true" @end="dragging = false">
<div class="list-group-item" v-for="element in list" :key="element.name">
{{ element.name }}
</div>
</draggable>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
data() {
return {
enabled: true,
list: [
{ name: "1 - John", id: 0 },
{ name: "2 - Joao", id: 1 },
{ name: "3 - Jean", id: 2 }
],
dragging: false
};
},
components:{
draggable
},
mounted() {
},
methods: {
checkMove: function(e) {
window.console.log("Future index: " + e.draggedContext.futureIndex);
}
}
};
</script>
<style lang="less">
.ghost {
opacity: 0.5;
background: #c8ebfb;
}
.list-group{
display: flex;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
width: 300px;
.list-group-item{
cursor: move;
position: relative;
display: block;
padding: 0.75rem 1.25rem;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid rgba(0,0,0,.125);
}
}
</style>
效果如下：
2.场景：两个列表间的拖拽（不克隆）
左边往右边拖拽，拖过来一个，左边就少一个，右边就会多一个
<template>
<div class="twoPage">
<div class="el-row">
<div class="el-col" :span="12">
<h3>Draggable 1</h3>
<draggable class="list-group" :list="list1" group="people" @change="log">
<div
class="list-group-item"
v-for="(element, index) in list1"
:key="element.name"
>
{{ element.name }} {{ index }}
</div>
</draggable>
</div>
<div class="el-col" :span="12">
<h3>Draggable 2</h3>
<draggable class="list-group" :list="list2" group="people" @change="log">
<div
class="list-group-item"
v-for="(element, index) in list2"
:key="element.name"
>
{{ element.name }} {{ index }}
</div>
</draggable>
</div>
</div>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
data() {
return {
list1: [
{ name: "list1 - 1:John", id: 1 },
{ name: "list1 - 2:Joao", id: 2 },
{ name: "list1 - 3:Jean", id: 3 },
{ name: "list1 - 4:Gerard", id: 4 }
],
list2: [
{ name: "list2 - 1:Juan", id: 5 },
{ name: "list2 - 2:Edgard", id: 6 },
{ name: "list2 - 3:Johnson", id: 7 }
]
};
},
components:{
draggable
},
mounted() {
},
methods: {
log: function(evt) {
window.console.log(evt);
}
}
};
</script>
<style lang="less">
.ghost {
opacity: 0.5;
background: #c8ebfb;
}
.list-group{
display: flex;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
width: 300px;
.list-group-item{
cursor: move;
position: relative;
display: block;
padding: 0.75rem 1.25rem;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid rgba(0,0,0,.125);
}
}
</style>
options配置项，
sort:false 表示拖动时禁止其进行排序操作
group: {name: ‘field’, pull: ‘clone’, put: false} 表示进行克隆拖动操作，并且该name和拖动的目标位置group名称一致，如右侧draggable标签的group同样为field
draggable=“.item” 将可拖动属性下放到每一个按钮下
3.场景：两个列表间的拖拽（克隆）
效果：左边往右边拖拽，拖过来一个，左边不会少，但右边就会多一个，相当于复制。
代码场景2的区别在于：
:group="{ name: 'people', pull: 'clone', put: false }"：表示可拖拽克隆出去，但不接收外面拖拽过来的
group="people"：简单的内部拖拽
<template>
<div class="twoPage">
<div class="el-row">
<div class="el-col" :span="12">
<h3>Draggable 1</h3>
<draggable class="list-group" :list="list1" :group="{ name: 'people', pull: 'clone', put: false }" @change="log">
<div
class="list-group-item"
v-for="(element, index) in list1"
:key="element.name"
>
{{ element.name }} {{ index }}
</div>
</draggable>
</div>
<div class="el-col" :span="12">
<h3>Draggable 2</h3>
<draggable class="list-group" :list="list2" group="people" @change="log">
<div
class="list-group-item"
v-for="(element, index) in list2"
:key="element.name"
>
{{ element.name }} {{ index }}
</div>
</draggable>
</div>
</div>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
data() {
return {
list1: [
{ name: "list1 - 1:John", id: 1 },
{ name: "list1 - 2:Joao", id: 2 },
{ name: "list1 - 3:Jean", id: 3 },
{ name: "list1 - 4:Gerard", id: 4 }
],
list2: [
{ name: "list2 - 1:Juan", id: 5 },
{ name: "list2 - 2:Edgard", id: 6 },
{ name: "list2 - 3:Johnson", id: 7 }
]
};
},
components:{
draggable
},
mounted() {
},
methods: {
log: function(evt) {
window.console.log(evt);
}
}
};
</script>
<style lang="less">
.ghost {
opacity: 0.5;
background: #c8ebfb;
}
.list-group{
display: flex;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
width: 300px;
.list-group-item{
cursor: move;
position: relative;
display: block;
padding: 0.75rem 1.25rem;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid rgba(0,0,0,.125);
}
}
</style>
效果和场景2一样
4.场景：两个列表间的拖拽-自定义克隆（克隆）
:clone="cloneDog" 这个方法自定义克隆
<template>
<div class="twoPage">
<div class="el-row">
<div class="el-col" :span="12">
<h3>Draggable 1</h3>
<draggable class="list-group" :list="list1" :group="{ name: 'people', pull: 'clone', put: true }" @change="log" :clone="cloneDog">
<div
class="list-group-item"
v-for="(element, index) in list1"
:key="element.name"
>
{{ element.name }} {{ index }}
</div>
</draggable>
</div>
<div class="el-col" :span="12">
<h3>Draggable 2</h3>
<draggable class="list-group" :list="list2" :group="{ name: 'people', pull: 'clone', put: true }" @change="log">
<div
class="list-group-item"
v-for="(element, index) in list2"
:key="element.name"
>
{{ element.name }} {{ index }}
</div>
</draggable>
</div>
</div>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
data() {
return {
list1: [
{ name: "list1 - 1:John", id: 1 },
{ name: "list1 - 2:Joao", id: 2 },
{ name: "list1 - 3:Jean", id: 3 },
{ name: "list1 - 4:Gerard", id: 4 }
],
list2: [
{ name: "list2 - 1:Juan", id: 5 },
{ name: "list2 - 2:Edgard", id: 6 },
{ name: "list2 - 3:Johnson", id: 7 }
]
};
},
components:{
draggable
},
mounted() {
},
methods: {
log: function(evt) {
window.console.log(evt);
},
cloneDog({ id }) {
return {
id: 8,
name: 'cat'
};
}
}
};
</script>
<style lang="less">
.ghost {
opacity: 0.5;
background: #c8ebfb;
}
.list-group{
display: flex;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
width: 300px;
.list-group-item{
cursor: move;
position: relative;
display: block;
padding: 0.75rem 1.25rem;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid rgba(0,0,0,.125);
}
}
</style>
