vue拖拽插件 拖拽插件 标签拖拽功能归纳
最近产品要求管理后台需要增加个拖动更换排序的功能 过去都是使用JQuery做的拖动。接触vue后打算找个vue插件体验下,于是乎,有了本篇。
未搭建环境简洁引入版
主要是引入下面这两个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配置:
vue-methods回调参数
渲染后的页面
拖拽后的回调
注意一点,定义可拖动的区域只需要定义最外层 div.row-hot-input的样式即可 以上为 div.row-hot-input宽度100% 高度80px时的效果 缩小页面 boostrap会自动适应小屏幕而降页面进行改变 效果如下:
因此可以归纳为,可拖动的区域均在最外层div.row-hot-input大盒子内 想要改变元素拖动的区域只需改变外层大盒子即可
原插件github地址如下:
各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/