vue拖拽插件 拖拽插件 标签拖拽功能归纳

最近产品要求管理后台需要增加个拖动更换排序的功能 过去都是使用JQuery做的拖动。接触vue后打算找个vue插件体验下，于是乎，有了本篇。

未搭建环境简洁引入版

< script src= " //cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js ">script>

< script src= " //cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js ">script>

< script src= " //cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.16.0/vuedraggable.min.js ">script>

主要是引入下面这两个js

- Sortable.min.js

- vuedraggable.min.js

demo如下：

DOM

设置热门搜索词：

:move="getdata" @update="datadragEnd" :options="{animation: 60,handle:'.row-hot-input'}">

×

JS- Data初始化如下：

data: {
total: '',
phone: '',
listData: [], //总渲染数据
tdNum: 8,
initData: 0, //初始化开关 控制是否出错
errMsg: "数据加载中...",
index: ["备注：", " 1、最多可设置5个热门搜索词，一个搜索词不要超过8个中文字", " 2、输入搜索词后按“Enter”键确认", "3、确认后可拖动排序搜索词排序"],
list: [],

},

重点如下：

以下为DOM配置说明以及vue-methods回调参数个人总结

DOM配置：

:list="list2" 绑定的数据是list2

:move="getdata"  getdata(拖拽元素的id)

@update="datadragEnd"  datadragEnd（.new和.old 能判断出移动到第几个位置）

:options="{animation: 60,handle:'.dargDiv'}" 开放式配置参数

animation 拖拽速度

handle 拖拽的单位

vue-methods回调参数

 getdata: function ( evt ) {

                              //                           console.log(evt.draggedContext);  //所选中的元素所带的参数集合

                         },

                        datadragEnd: function ( evt ) {

                              //                           console.log('拖动前的索引：' + evt.oldIndex);

                              //                           console.log('拖动后的索引：' + evt.newIndex);

                              console .log( JSON .stringify( this .list));

                        },

渲染后的页面 

拖拽后的回调

注意一点，定义可拖动的区域只需要定义最外层 div.row-hot-input的样式即可 以上为 div.row-hot-input宽度100% 高度80px时的效果 缩小页面 boostrap会自动适应小屏幕而降页面进行改变 效果如下：

因此可以归纳为，可拖动的区域均在最外层div.row-hot-input大盒子内 想要改变元素拖动的区域只需改变外层大盒子即可

原插件github地址如下：

https://github.com/SortableJS/Vue.Draggable

各demo地址详见一下：

• Simple: https://jsfiddle.net/dede89/sqssmhtz/
• Two Lists: https://jsfiddle.net/dede89/32ao2rpm/
• Example with list clone: https://jsfiddle.net/dede89/t3m5krea/
• Example with transition-group: https://jsfiddle.net/dede89/m2v0orcn/
• Example with table: https://jsfiddle.net/dede89/L54yu3L9/

Full demo example

draggable-example