官方文档
录屏软件
：
screenToGif
(将视频转为Gif，我认为简单又好操作)
我深知，文字的感知不如图片，图片的感知不如视频，所以希望在每一次的记录中，都有种收货与喜悦，虽然以前用过这个插件，相当强大的插件，但第一次从0到1，所以记录美好时刻~
要有相同的name
，如：
name:'site'
设定pull属性 ，如
pull:'clone'
设定put属性，如：
put:false
,我需要能够添加列信息，所以并没有使用此属性
-
以上完整写法：
:group="{name:'site',pull:'clone',put:'false'}"
以为是属性设定欠缺，但最后
F12
查看后发现，
我的div并没有撑满整个父div
,添加
height:100%
即可
解决方案：移除官网中的
< 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>
最近在学习一个可视化搭建的项目，里面用的拖拽就是draggable.js。看了几个中文的文档，有很多坑，可能是没有及时更新的原因。
建议去看vuedraggable的官方文档，只不过是英文的。官方文档：https://github.com/SortableJS/Vue.Draggable；
由于vue3已经是默认版本了，所以vuedraggable也对应vue2.0和3.0有各自的版本，直接使用基本命令安装：
npm install vuedraggable --save
会默认安装2.1左右的
在项目中总会遇见一些需要排序的数据 ， 那我们可以通过vuedraggable 进行拖动排序 。
draggable为基于sortable.js的vue组件，用以实现拖拽功能。特性支持触摸设备支持拖拽和选择文本支持智能滚动，支持不同列表之间的拖拽。
npm i -S vuedraggable
import draggable from "vuedraggable"
部分代码：
实际应用：（已应用到某大型活动中…）
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
参见演示： :
有关工作原理的详细说明，请查看的和。
官网地址：https://www.npmjs.com/package/vuedraggable
Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。
npm i -S vuedraggable
或者引入：
vue.draggable的clone拷贝实现常用菜单功能vue.draggable的clone拷贝实现常用菜单功能，从一个拖拽组拖动到另外一个组而原来的那种组的元素不移除。先看例子从左边的元素拖动到右边试试看，然后再从右边拖回到左边。例子相关属性属性说明clone:options="{group:{name: 'itxst',pull:'clone'},sort: true}"group属性的c...
在功能中有一项是需要实现拖拽的。虽然最终项目没有采取这样的拖拽方式，但是，当初也是费了九牛二虎之力完成了这个功能。增加了对函数的更深理解。下面就再重现一下代码。
这是张鑫旭的关于drag与drop函数的介绍，很详细：http://www.zhangxinxu.com/wordpress/2011/02/html5-drag-drop-%E6%8B%96%E6%8B%BD%E4%B8%8E%E6%
简单的拖动使用{{i.name}}import draggable from "vuedraggable"export default {components: {draggable},data () {return {list: [{ id: 1, name: 'aaa' },{ id: 2, name: 'bbb' },{ id: 3, name: 'ccc' }]}},methods: {s...
