vue-draggable的多列拖动与拷贝拖拽（不删除源数据列）

月下脆竹書閣

已于 2022-05-06 20:35:48 修改

阅读量2.5k

点赞数 5

分类专栏： VUE 文章标签： vue.js javascript 前端

于 2022-05-06 20:26:35 首次发布

本文链接：https://blog.csdn.net/c_x_m/article/details/124617176

版权

VUE 专栏收录该内容

56 篇文章 3 订阅

订阅专栏

vue-draggable的多列拖动与拷贝拖拽（不删除源数据列）

Demo
所用属性
所遇困难
源码

Demo

官方文档
录屏软件：screenToGif (将视频转为Gif，我认为简单又好操作)

我深知，文字的感知不如图片，图片的感知不如视频，所以希望在每一次的记录中，都有种收货与喜悦，虽然以前用过这个插件，相当强大的插件，但第一次从0到1，所以记录美好时刻~

在这里插入图片描述

所用属性

1.多列之间想要互相拖动

要有相同的name，如：name:'site'

2.多列直接想要拷贝，不移除

设定pull属性，如pull:'clone'

3.要想在列中不添加参数

设定put属性，如：put:false,我需要能够添加列信息，所以并没有使用此属性

以上完整写法：:group="{name:'site',pull:'clone',put:'false'}"

所遇困难

1.拖拽并不生效

以为是属性设定欠缺，但最后F12查看后发现，我的div并没有撑满整个父div,添加height:100%即可

2.当我使用Dropdown组件时，并不显示下拉

解决方案：移除官网中的< transition-group >,具体原因不知道，但移除后确实显示了下拉信息

3.当我想要列信息不要重复显示，使用new Set去重时

报错了：Computed property "setParamListC" was assigned to but it has no setter.，setParamListC是我第一个列所双向绑定的列
解决方案：是因为使用了v-model进行了数据修改，所以需要添加set方法

  computed: {
	setParamListC: {
	 get () {
	    return [...new Set(this.setParamList)]
	  },
	  set () { }
	},
}

本来是用监听setParamList来进行去重操作，但报错了，报错信息如下：
You may have an infinite update loop in watcher with expression "setParamLis，
说是可能会陷入死循环，于是乎灵机一动，用了计算属性（Computed）,具体为什么，不知道，有一种感觉可行，然后试了一下真的可以了。应该和新建一个参数重新赋值一样的吧。

源码

数据源（左侧列）

<div class="field">
 <div class="field-drag" v-if="isShowParamList">
   <!-- ,put:false -->
   <draggable v-model="setParamListC" :group="{name:'site',pull:'clone'}" style="height:99%">
     <div class="field-item" v-for="(item) in setParamListC" :key="item">{{item}}</div>
   </draggable>
 </div>
 <div class="dot" @click="isShowParamList=!isShowParamList">
   <Icon type="md-arrow-dropleft" />
 </div>
 <!-- <draggable>
   <div class="field-item" :key="index">{{item}}</div>
 </draggable> -->
</div>
computed: {
    setParamListC: {
      get () {
        return [...new Set(this.setParamList)]
      },
      set () { }
    }
}

行，列代码相同，绑定参数不同

<FormItem label="行">
  <div class="row">
    <draggable group="site" v-model="rowParamList" class="site-flex" chosenClass="item">
      <Dropdown v-for="(item,index) in rowParamList" :key="`${item}${index}`" transfer trigger="click" @on-click="name=>dropDownClick(name,index,'row')">
        <div class="item">
          <Icon type="ios-arrow-down"></Icon>
          {{item}}
        </div>
        <DropdownMenu slot="list">
          <Dropdown placement="left-start" transfer>
            <DropdownItem>
              <Icon type="ios-arrow-forward"></Icon>
              度量
            </DropdownItem>
            <DropdownMenu slot="list">
              <DropdownItem :name="`${item}`">原值</DropdownItem>
              <DropdownItem :name="`Count(${item})`">计数</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </DropdownMenu>
      </Dropdown>
    </draggable>
  </div>
</FormItem>