官网地址：

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>