vuedraggable的使用(vuedraggable官方文档)

vuedraggable的使用

推荐整理分享vuedraggable的使用(vuedraggable官方文档)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue drag,vuedraggable教程,vuedraggable参数配置,vuedraggable官方文档,vuedraggable原理,vuedraggable教程,vuedraggable原理,vue dragable,内容如对您有帮助，希望把文章链接给更多的朋友！

官网地址： 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>