vuedraggable示例_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>