效果视频:https://live.csdn.net/v/299764?spm=1001.2014.3001.5501
https://live.csdn.net/v/299764?spm=1001.2014.3001.5501
vue拖拽
前端部分
vue部分代码
<li v-for="(item, index) in oneChannelList" :key="item.id" :draggable="true" @dragstart="dragstart(item)"
@dragenter="dragenter(item,$event)" @dragend="dragend(item,$event)" @dragover="dragover($event)"
@click="handleChangeTab(item.id, true)">
<div class="list_img" @mouseenter="buttonsShowFun(item.id)" @mouseleave="buttonsShowFun(-1)">
<div class="img" :style="{backgroundImage:'url('+item.img+')'}" />
<div v-show="item.id === buttonsShow" class="buttons">
<el-button type="danger" icon="el-icon-delete" style="margin:5px;" size="mini"
@click="deleteChannel(item.id)" />
<el-button type="primary" icon="el-icon-picture-outline" style="margin:5px;" size="mini"
@click="openImg(item.img)" />
<el-button type="primary" icon="el-icon-edit" style="margin:5px;" size="mini" @click="info(item.id)" />
</div>
</div>
<em class="list_title">{{ item.name }}</em>
</li>
data() {
return {
oldData: [],
newData: [],
}
}
methods: {
//拖拽排序前的数组
dragstart(value) {
this.oldData = value
console.log("oldData:" + this.oldData);
},
//拖拽排序后的数组
dragenter(value, e) {
this.newData = value
e.preventDefault()
console.log("newData:" + this.newData);
},
//拖拽最后操作
dragend(value, e) {
if (this.oldData !== this.newData) {
const oldIndex = this.oneChannelList.indexOf(this.oldData)
const newIndex = this.oneChannelList.indexOf(this.newData)
const newItems = [...this.oneChannelList]
newItems.splice(oldIndex, 1)
newItems.splice(newIndex, 0, this.oldData)
this.oneChannelList = [...newItems]
const idList = []
this.oneChannelList.forEach((value, index) => {
idList.push(value.id)
})
//后台更新序号
this.channelRankFun(idList);
}
},
// 拖动事件(主要是为了拖动时鼠标光标不变为禁止)
dragover(e) {
e.preventDefault()
},
channelRankFun(ids) { //跟后台交互的方法,只传排序完成的id数组就行了
channelRank({
idList: ids
}).then(
res => {
console.log(res)
}
);
},
}
Java部分代码
这里我直接写的sql,没有在java里写其他的代码。个人根据实际情况参考
<update id="channelRank">
update ayj_channel set rank = case
<foreach collection="array" item="item" index="index" open="" close="" separator="">
when id = #{item} then #{index}+1
</foreach>
end
where id in (
<foreach collection="array" item="item" index="index" open="" close="" separator=",">
#{item}
</foreach>
)
</update>