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

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

未搭建环境简洁引入版

<!-- CDNJS :: Vue ( https://cdnjs.com/ ) -->

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

<!-- CDNJS :: Sortable ( https://cdnjs.com/ ) -->

< script src= " //cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js "></ script>

<!-- CDNJS :: Vue.Draggable ( https://cdnjs.com/ ) -->

< 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

<!--你的代码书写在此处-->
<div class="container-fluid initBox">
<div class="row queryInfo">
<h4>设置热门搜索词：</h4>
</div>
<div class="row row-hot-input">
<draggable :list="list" :move="getdata" @update="datadragEnd" :options="{animation: 60,handle:'.row-hot-input'}">
<transition-group name="list-complete" class='form-inline'>
<div v-for="(item,index) in list" :key="item.id" class="list-complete-item form-group">
<div class="hot-input-box">
<input type="text" placeholder="请输入热门搜索词" @keyup.enter="enter(item.id,item.keyWord,index)" v-model="item.keyWord" class="form-control hot-input" maxlength="8" value="" />
<label @dblclick="close(index)" :class="{hide:!!item.state}"><span class="text-red" @click="close(index)">×</span></label>
</div>
</div>
</transition-group>
</draggable>
</div>
<div class="row text-info" v-for="item in index" :key='index.item' v-html="item"></div>

</div>

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