vue2 draggable拖拽组件的使用及注意事项

记录draggable拖拽组件的使用方法以及遇到的问题。

参考文章draggable拖拽组件使用

参考文章Vue项目拖拽插件 ---- vuedraggable的安装与使用

• 效果图

 vue.draggable中文api地址https://www.itxst.com/vue-draggable/tutorial.html

•  安装

npm install vuedraggable

• 引入与使用

<template>
  <div class="cardDrag-container common-container">
    <div class="cardDrag-content">
      <div class="left-drag-container">
        <draggable
          tag="ul"
          class="cardDrag-list-wrap"
          v-model="leftComponentsList"
          :group="groupLeft"
          animation="300"
        >
          <li
            class="cardDrag-list"
            v-for="item in leftComponentsList"
            :key="item.id"
          >
            <div class="cardDrag">
              <svg-icon class="svg-width" :iconClass="item.icon"></svg-icon>
              <label>{{item.name}}</label>
            </div>
          </li>
        </draggable>
      </div>
      <div class="right-drag-container">
        <draggable
          tag="ul"
          class="cardDrag-list-wrap"
          v-model="rightComponentsList"
          :group="groupRight"
          animation="300"
          @add="handleAdd"
        >
          <li
            class="cardDrag-list"
            v-for="item in rightComponentsList"
            :key="item.id"
          >
            <div class="cardDrag cardBackground" :style="computedStyle">
              <div class="card-box">
                <svg-icon class="svg-width" :iconClass="item.icon"></svg-icon>
                <label>{{item.name}}({{item.orderId}})</label>
              </div>
            </div>
          </li>
        </draggable>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import _ from 'lodash'
export default {
  name: 'index',
  components: {
    draggable,
  },
  data(){
    return{
      leftComponentsList:[
        { id: 1, orderId: 1, name: '电商购物评价', icon: 'dianshanggouwupingjia' },
        { id: 2, orderId: 2, name: '波特五利', icon: 'bote5li' },
        { id: 3, orderId: 3, name: '提炼产品卖点', icon: 'tilianchanpinmaidian' },
        { id: 4, orderId: 4, name: '写周报', icon: 'xiezhoubao' },
      ],
    rightComponentsList:[
        { id: 11, orderId: 109, name: '产品卖货笔记', icon: 'chanpinmaihuobiji' },
        { id: 12, orderId: 110, name: '优化简历', icon: 'youhuajianli' },
        { id: 13, orderId: 111, name: '数据分析', icon: 'shujufenxi' },
        { id: 14, orderId: 112, name: '用户画像', icon: 'xieyonghuhuaxiang' },
      ],
      groupLeft:{
        name: 'itxst',
        pull: 'clone',  // 拖出
        put: false,   // 拖入
      },
      groupRight:{
        name: 'itxst',
        pull: false,  // 拖出
        put: true,   // 拖入
      },
    }
  },

}
</script>

v-model绑定拖拽的数组。

下面说明一下用到的属性及事件。

• group

拖拽分组，多组之间相互拖拽，可以实现不同数组之间相互拖拽。例如group都为itxst的分组可以相互拖拽。

//设置方式一，直接设置组名
group:'itxst'
//设置方式，object，也可以通过自定义函数function实现复杂的逻辑
group:{
    name:'itxst',//组名为itxst
    pull: true|false| 'clone'|array|function,//是否允许拖出当前组
    put:true|false|array|function,//是否允许拖入当前组
}

• tag

draggable 标签在渲染后展现出来的标签类型，默认渲染成div。

• animation

拖拽时的动画时间，单位:ms。

• add

添加单元时的回调函数。

下面列出在使用draggable过程中发现的两个问题。

• 注意事项一

需要设置拖拽容器的高度，否则，当容器内没有小块时，高度为0，再想拖拽小块进入该容器就拖不进去了。

<style lang="scss">
.left-drag-container div span{
  display: inline-block;
  width: 100% !important;
  height: calc(100vh - 180px) !important;
}

.right-drag-container div span{
  display: inline-block;
  width: 100% !important;
  height: calc(100vh - 180px) !important;
}
</style>

• 注意事项二

在这里，左边的容器拖出时是clone模式，连续拖拽同一个到右边容器时，控制台提示报错，并且组件展示的内容都一样，组件的属性值也被修改成相同的值。

页面的展示内容

此时的代码是这么写的

    handleAdd(e){
      const newIndex = e.newIndex
      const newCard = this.rightComponentsList[newIndex]
      newCard.id = this.randomNumber()
      newCard.orderId = this.cardId
      this.cardId = this.cardId + 1
      this.$set(this.rightComponentsList,newIndex,newCard)
    },

可以看到页面上，新拖拽的三个组件显示的orderId是一样的，后来发现造成这个错误是因为，在右边容器添加组件，取该组件的属性时使用的是简单赋值，在拖拽新的组件时，修改了同组件的属性值。

代码做如下修改

    handleAdd(e){
      const newIndex = e.newIndex
      // 深拷贝
      const newCard = _.cloneDeep(this.rightComponentsList[newIndex])  
      newCard.id = this.randomNumber()
      newCard.orderId = this.cardId
      this.cardId = this.cardId + 1
      this.$set(this.rightComponentsList,newIndex,newCard)
    },

 以上就是在使用过程中发现的问题啦~