最近产品要求管理后台须要增长个拖动更换排序的功能 过去都是使用JQuery作的拖动。接触vue后打算找个vue插件体验下,因而乎,有了本篇。html
未搭建环境简洁引入版vue
主要是引入下面这两个jsgit
demo以下:github
DOMajax
<!--你的代码书写在此处-->
<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>
npm
</div>app
JS- Data初始化以下:ide
data: {
total: '',
phone: '',
listData: [], //总渲染数据
tdNum: 8,
initData: 0, //初始化开关 控制是否出错
errMsg: "数据加载中...",
index: ["备注:", " 一、最多可设置5个热门搜索词,一个搜索词不要超过8个中文字", " 二、输入搜索词后按“Enter”键确认", "三、确认后可拖动排序搜索词排序"],
list: [],
ui
},this
重点以下:
如下为DOM配置说明以及vue-methods回调参数我的总结
DOM配置:
vue-methods回调参数
渲染后的页面
拖拽后的回调
所以能够概括为,可拖动的区域均在最外层div.row-hot-input大盒子内 想要改变元素拖动的区域只需改变外层大盒子便可
原插件github地址以下:
各demo地址详见一下: