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">
      <draggable
        v-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">
      <draggable
        v-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实现上下左右拖拽组件功能