VUE的vuedraggable拖拽功能

vuedraggable内部是用SortableJS做的,vuedraggable只是做了vue组件方面的封装

因为拖拽组件依赖sortablejs ，如果项目没有安装sortablejs ，可能需要安装一下

npm install sortablejs --save

首先需要安装vuedraggable依赖包：

npm install vuedraggable --save

• 然后上代码

<template>

  <div style="height: 1000px;">
    <div class="test-left">
      <!-- 左侧按钮 -->
      <draggable
        v-model="list1"
        draggable=".c-item"
        v-bind="dragOptionsL"
        :options="{sort: false, group: {name: 'field', pull:'clone',put: false}}"
      >
        <div v-for="(d,index) in list1" :key="index" class="item c-item">{{d.name}}</div>
      </draggable>
    </div>
    <div class="test-right">
      <!-- 右侧按钮 -->
      <draggable group="field" :list="list2" v-bind="dragOptionsR" @change="toChange">
        <div v-for="(d,k) in list2" :key="k" class="item">{{d.name}}</div>
      </draggable>
    </div>
  </div>

</template>
<script>
import draggable from "vuedraggable";
export default {
  data() {
    return {
      list1: [
        { name: "11", id: 1 },
        { name: "22", id: 2 },
        { name: "33", id: 3 },
        { name: "44", id: 4 },
      ],
      list2: [
        { name: "5", id: 5 },
        { name: "6", id: 6 },
        { name: "7", id: 7 },
      ],
    };
  },
  components: {
    SortTable1,
  },
  computed: {
    dragOptionsL() {
      return {
        disabled: false,
        ghostClass: "ghostL", //注意：在左侧上下移动时，使用这个类；
      };
    },
    dragOptionsR() {
      return {
        animation: 500,
        disabled: false,
        ghostClass: "ghostR", //注意：在右侧上下移动时，使用这个类
      };
    },
  },
  methods: {
    toChange(e) {
      console.log(e);
      if (e.added) {
        console.log(this.list2);
      }
    }
  }
};
</script>

<style lang="less">
.test-left {
  float: left;
  width: 300px;
}
.test-right {
  float: left;
  margin-left: 20px;
  width: 300px;
}
.test-right > div {
  min-height: 80px; /*为了防止右侧开始没有内容时不可以拖动*/
}
.item {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background: #f2f2f2;
  margin-bottom: 12px;
}

.ghostL {
  opacity: 0.5;
  width: 230px;
}
.ghostR {
  opacity: 0;
  width: 230px;
}
</style>