vue拖拽列表vuedraggable

效果：

要点：

• 安装npm install vuedraggable
• 引入import draggable from 'vuedraggable'
• 使用

  <vuedraggable class="wrapper" v-model="list">
      <transition-group>
        <div v-for="item in list" :key="item" class="item">
          <p>{{item}}</p>
        </div>
      </transition-group>
    </vuedraggable>
  

示例：

<template>
  <div :style="{display:'flex'}">
    <draggable
      v-model="boy"
      :options="{animation:500,group:'people'}"
    >
      <transition-group>
        <div
          v-for="e in boy"
          :key="e.text"
        >
          <el-button
            type="primary"
            style="width: 300px;margin: 20px;"
          >{{e.text}}</el-button>
        </div>
      </transition-group>
    </draggable>
    <draggable
      v-model="girl"
      :options="{animation:500,group:'people'}"
    >
      <transition-group>
        <div
          v-for="e in girl"
          :key="e.text"
        >
          <el-button
            type="danger"
            style="width: 300px;margin: 20px;"
          >{{e.text}}</el-button>
        </div>
      </transition-group>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  name: "PageDrag",
  data() {
    return {
      boy: [
        { text: "林1" },
        { text: "林2" },
        { text: "林3" },
        { text: "林4" },
        { text: "林5" },
        { text: "林6" },
        { text: "林7" },
        { text: "林8" },
        { text: "林9" }
      ],
      girl: [
        { text: "李1" },
        { text: "李2" },
        { text: "李3" },
        { text: "李4" },
        { text: "李5" }
      ],
      startArr: [],
      endArr: [],
      count: 0
    };
  },
  components: {
    draggable
  },

};
</script>

<style lang="less" scoped>
.test {
  border: 1px solid #ccc;
}
.ghostClass {
  opacity: 1;
}
.bottom {
  width: 100px;
  height: 50px;
  position: relative;
  background: blue;
  top: 2px;
  left: 2px;
  transition: all 0.5s linear;
}
</style>

DEMO下载