需求:横向排列的测试01、测试02、测试03需要拖拽排序
主要思路:前端通过鼠标按住某一项拖拽排序,tabList会重新排序得到新数组,遍历新数组获取id得到排序的id数组,调用后端接口,后端根据排序的idList更新数据库的orderNum序号字段。
在拖动目标上触发事件 (源元素):
- ondragstart - 用户开始拖动元素时触发
- ondrag - 元素正在拖动时触发
- ondragend - 用户完成元素拖动后触发
释放目标时触发的事件:
- ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
- ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
- ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
- ondrop - 在一个拖动过程中,释放鼠标键时触发此事件
前端:
<div v-for="(item,index) in tabList" :key="index" class="tab-item" :class="currentTab === item.id ? 'activeTab':''" :draggable="true" @dragstart="dragstart(item)" @dragenter="dragenter(item,$event)" @dragend="dragend(item,$event)" @dragover="dragover($event)" @click="handleChangeTab(item.id, true)" > <span>{{ item.collectionName }}</span> </div>
//拖拽排序前的数组 dragstart(value) { this.oldData = value }, //拖拽排序后的数组 dragenter(value, e) { this.newData = value e.preventDefault() }, //拖拽最后操作 dragend(value, e) { if (this.oldData !== this.newData) { const oldIndex = this.tabList.indexOf(this.oldData) const newIndex = this.tabList.indexOf(this.newData) const newItems = [...this.tabList] newItems.splice(oldIndex, 1) newItems.splice(newIndex, 0, this.oldData) this.tabList = [...newItems] const idList = [] this.tabList.forEach((value, index) => { idList.push(value.id) }) //后台更新序号 this.apiRefreshCollectionOrderNum({ packageId: this.packageId, idList: idList }).then(res => { const { success, message } = res if (success) { this.$message({ message: message, type: 'success' }) } }) } }, // 拖动事件(主要是为了拖动时鼠标光标不变为禁止) dragover(e) { e.preventDefault() }
后端: sql直接更新
StringBuilder sb = new StringBuilder("update table bc set bc.order_num = case bc.id "); for (int i = 0; i < idList.size(); i++) { sb.append(" when "); sb.append(idList.get(i)); sb.append(" then "); sb.append(i + 1); } sb.append(" end where bc.id in(:ids)"); Session session = entityManager.unwrap(Session.class); NativeQuery query = session.createSQLQuery(sb.toString()); query.setParameter("ids", idList);