vue拖拽插件Draggable笔记

文章发布于2020年09月11日 18:08, 归类于: 前端

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>

转载请注明来源:《 vue拖拽插件Draggable笔记》- rojerYong's Blog

文章链接:https://www.eoway.cn /article/1599818925.html

如果此文摘取了你的原创,请联系本站管理员,将对此文修改、删除处理。

--END--
上一篇:uniapp打包ios正式版后没有位置服务,privacyDescription描述设置 下一篇:windows安装MySQL