Vue draggable实现上下左右拖拽组件功能
第一步：安装第二步：使用效果看官方文档，是没有上下左右的例子，只有两栏左右拖拽的，但是每一栏只能上下，而不能左右 其实这里用了display：flex的属性，flex-wrap:wrap 如果宽度超出 那么就自动的往下布局来实现的
官方文档
第一步：安装
vue2 安装命令
npm i vuedraggable -S
vue3 安装会报错：Cannot read property ‘header’ of undefined。安装最新版本的vuedraggable即可，命令行如下
npm i -S vuedraggable@next
第二步：使用
我用的是vue3 setup语法糖写法
<template><div class="container"><div class="left"><draggablev-model="myArray"group="people"@start="drag = true"@end="drag = false"item-key="id"><template #item="{ element }"><div class="item">{{element.name }}</div></template></draggable></div><div class="right"><draggablev-model="myArray2"group="people"@start="drag = true"@end="drag = false"item-key="id"><template #item="{ element }"><div class="item">{{element.name }}</div></template></draggable></div></div></template><script>import {defineComponent, reactive, toRefs } from "vue";import draggable from "vuedraggable";export default defineComponent({components: {draggable },setup() {const data = reactive({drag: false,myArray: [{id: 1, name: "Jenny" },{id: 2, name: "kevin" },{id: 3, name: "lili" },],myArray2: [{id: 1, name: "A" },{id: 2, name: "B" },{id: 3, name: "C" },],});return {...toRefs(data) };},});</script><style lang="less" scoped>.container {display: flex;.left {background-color: #fff;width: 200px;height: 1000px;margin: 0 20px;padding: 20px;.left-drag {display: flex;flex-wrap: wrap;justify-content: space-between;min-height: 80px;}}.right {background-color: #fff;height: 1000px;width: 200px;padding: 20px;.right-drag {width: 410px;min-height: 80px;display: block;}}.item {height: 40px;border: 1px solid #e9e9e9;text-align: center;line-height: 40px;margin: 20px 0;background-color: rgb(242, 242, 242);}}</style>
效果
Vue draggable实现上下左右拖拽组件功能
