vue拖拽插件Draggable笔记

vue拖放插件 Vue.Draggable

Vue.Draggable：https://github.com/SortableJS/Vue.Draggable

npm i -S vuedraggable

demo：

<template>
  <div>
    <draggable class="list" @end="end" animation="200">
      <div class="item" v-for="d in myList" :key="d._id">{{d.name}}</div>
    </draggable>
  </div>
</template>
<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable,
  },
  data() {
    return {
      myList: [
        { name: "苹果", id: 1 },
        { name: "葡萄", id: 2 },
        { name: "西瓜", id: 3 },
      ],
    };
  },
  methods: {
    end(e) {
      console.log("e", e);
      console.log("this.myList", this.myList);
    },
  },
};
</script>

<style lang="less" scoped>
.list {
  display: flex;
  flex-wrap: wrap;
  padding: 30px 0;
  background: rgb(0, 115, 160);
}

.item {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border: 1px solid #000;
  margin: 10px;
  background: rgb(0, 0, 0);
  color: #ffffff;
  text-align: center;
}
</style>

属性

animation，拖拽过渡动画时间。 filter，禁止拖拽的元素类名。

<draggable class="list" filter=".undraggable" :group="{name:'people',pull:true,put:true}" @end="end" animation="200">
  <div class="item" :class="{'undraggable':d.ban}" v-for="d in myList" :key="d._id">{{d.name}}</div>
</draggable>

myList: [
  { name: "苹果", id: 1 },
  { name: "葡萄", id: 2,ban:true},
  { name: "西瓜", id: 3 },
]

类名为undraggable的元素禁止拖动。

事件

start, add, remove, update, end, choose, unchoose, sort, filter, clone，change。 @start，拖拽开始。 @end，拖拽结束事件。 ...

vuex数据绑定

<draggable class="list" v-model="myList">
  <div class="item" v-for="d in myList" :key="d.id">{{d.name}}</div>
</draggable>

computed: {
  myList: {
    get() {
      return this.$store.getters["Home/getMyList"];
    },
    set(value) {
      this.$store.commit("Home/updateMyList", value);
    },
  },
}

group 多列拖拽

在两个draggable上设置group="shop"，两组之间数据可以互相拖拽。

<!-- shopList -->
<draggable class="list" v-model="shopList" group="shop" :clone="clone">
  <div class="item" v-for="d in shopList" :key="d.id">{{d.name}}</div>
</draggable>

<!-- myList -->
<draggable class="list myList" v-model="myList" group="shop" animation="200">
  <div class="item" v-for="d in myList" :key="d.id">{{d.name}}</div>
</draggable>

group 属性

name，组名 put，是否接收其他列拖进来的数据，true：接收，false：不接收。 pull，向其他列拖拽数据，true：本列会减少一个数据，对方列表增加一个数据。clone：本列不减少数据，对方列表增加一个数据。

<!-- shopList -->
<draggable class="list" v-model="shopList"  :group="{name:'people',pull:'clone',put:false}" @clone="onClone">
  <div class="item" v-for="d in shopList" :key="d.id">{{d.name}}</div>
</draggable>

<!-- myList -->
<draggable class="list myList" v-model="myList" :group="{name:'people',pull:true,put:true}" animation="200">
  <div class="item" v-for="d in myList" :key="d.id">{{d.name}}</div>
</draggable>

如果有shopList设置了pull:"clone"，那么shopList的数据不会改变，myList就可能收到重复的数据，当数据id相同时，会报错：

Duplicate keys detected: '8'. This may cause an update error.

解决方法1，在shopList的draggable上添加@clone="onClone"，在拖拽到myList前处理输出的数据。

methods: {
  onClone(n) {
    return {
      _id: new Date().valueOf(), // 返回一个不会重复的_id
      ...n,
    };
  },
}

并且，myList的数据列表使用:key="d._id"。

<div class="item" v-for="d in myList" :key="d._id">{{d.name}}</div>

解决方法2，使用index。

 <div class="item" v-for="(d,index) in myList" :key="index">{{d.name}}</div>