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>

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

layui关闭表格编辑_Layui表格table关闭拖拽列宽、禁用拖拽列宽
table 模块是Layui的又一走心之作,在 layui 2.0 的版本中全新推出,是 layui 最核心的组成之一.它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求. ...
vue+element-ui实现富文本(含有图片粘贴拖拽上传)
vue+element-ui实现富文本(含有图片粘贴拖拽上传) Just For Share | 仅仅分享首先需要安装 cnpm i vue-quill-editor -D 富文本编辑器 cnpm ...
h5物体拖动_html5实现拖拽效果
在此之前,实现拖拽操作都是开发人员自定义逻辑实现的,但是HTML5提供了拖拽API ,使得拖拽操作的实现变得简单. fish.gif 拖拽 #div1 { width: 100px; height: ...
vue下轻松解决模拟微信视频缩略图拖拽→吸附窗口边界的功能
<script> export default {data() {return {drag: {draggedSel: ".girl", //被拖动元素的class或i ...
vue的移动app项目中，自定义拖拽指令的问题
使用vue的都知道vue有一个自定义指令,我比较喜欢的就是拖拽的自定义指令,感觉挺方便的! //组件内的拖拽指令 directives: {//组建内自定义指令drag: {// 指令的定义bind: ...
简单的进度条拖动效果及拖拽改变层大小
业务需求价格区间的进度条拖动初级demo 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=&qu ...
vue使用高德地图的搜索地址和拖拽选址
1.引入高德地图方式-NPM npm i @amap/amap-jsapi-loader --save 2.vue中引入,用到所搜提示组件和拖拽选址,本人的经历是2.0版本是个傻逼垃圾坑,用默认的版本 ...
Vue实现图片预览（放大缩小拖拽）纯手写
这张图是显示的图片放大的一个预览情况,这里是参考预览操作实现的一个背景为黑色的部分,上层的图片可实现滚轮放大或者点击上部的放大镜图标进行放大,代码是基于Ant Design Vue框架的基础上这里先 ...
教你如何用duilib实现控件可拖动，可拖拽
要实现的效果: 鼠标点击控件(自绘控件,可继承任意控件类,下文将给出示例),并且进行拖拽,会有一个半透明黑色阴影来表示当前拖动的位置.当松开鼠标,控件重新绘制在鼠标松开的位置.拖拽功能的实现代码主要在 ...

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

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

Demo

所用属性

所遇困难

源码

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

最新文章

热门文章