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

vuedraggable的使用相关推荐

vuedraggable示例_vue拖拽列表vuedraggable
效果: 要点: 安装 npm install vuedraggable 引入 import draggable from 'vuedraggable' 使用 <vuedraggable clas ...
ios滚动条影响父页面 vue_父元素设置overflow:scroll时vuedraggable组件出现奇怪效果的解决方案...
在使用 vu围幸业很例站闪以近着好务多如宽动为近着好edraggable 做拖拽效果时,因为要用到滚动条而使用了 overflow: scroll,导致了两个奇怪的效果,虽然折腾了一段时间,不过最后我 ...
10 分钟上手 Vue 组件 Vue-Draggable
Vue 综合了 Angualr 和 React 的优点,因其易上手,轻量级,受到了广泛应用.成为了是时下火热的前端框架,吸引着越来越多的前端开发者! 本文将通过一个最简单的拖拽例子带领大家快速上手 V ...
vuedraggable自由拖拽html,vue中draggable拖拽列表的使用
1.安装 npm install vuedraggable 或者使用镜像安装 cnpm install vuedraggable 2.使用首先在使用的组件中引入 import draggable f ...
vuedraggable示例_vuedraggable快速入门
value和list 这两个都可以给一个draggable注入数据源: /*value注入数据源*/ export default { data() { return { list:[{ name:' ...
vuedraggable嵌套块拖拽_Vue 基于 vuedraggable 实现选中、拖拽、排序效果
今天有个朋友说要做个效果:Vue实现拖拽排序,要有 checked,输出结果是排序后的,要全选,未选中的不能拖动. 其实我之前基于 Sortable 做过一个类似的效果.也给他看过了,没看太明白,他就 ...
vuedraggable能实现自由拖拽功能吗?_基于 vue.js 仿禅道主页拖拽效果
今天给大家分享一个超不错的Vue仿禅道首页拖拽布局VueDndKon. vue-dnd-kon 基于vuedraggable实现的仿禅道首页拖拽项目.支持模块上下及左右自由拖动布局. 主页分为左右两栏 ...
vue可视化拖拽生成工具_GitHub - 1260215278/dragUI: 基于vuedraggable.js + uni 的可视化拖拽编程，自动生成项目，自动生成代码，自行导入第三方组件...
dragUI 用于UNI可拖拽可视化编程在线演示效果图基于快速开始参考uni官网安装普通uni项目(运行uni-app)运行到浏览器另需要手动下载包npm install 项目目录 col ...
vuedraggable拖拽插件使用
文档地址:http://www.itxst.com/vue-draggable/tutorial.html 引入方式(npm): npm i -S vuedraggable 简单使用: <tem ...
vue3使用vuedraggable实现拖拽
1.npm i vuedraggable -S,使用这个命令,vue3会报错,如下图 2.使用npm uninstall vuedraggable -S 卸载,再使用npm i -S vuedragg ...

vuedraggable的使用