首页 > 其他分享> 文章详细

VUE 实现拖拽排序（前后端）

2021-10-14 16:31:30 阅读：304 来源： 互联网

标签：触发 VUE idList 拖动 value sb 排序拖拽

需求：横向排列的测试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);

标签：触发,VUE,idList,拖动,value,sb,排序,拖拽
来源： https://blog.csdn.net/m0_50304006/article/details/120765951

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

VUE 实现拖拽排序（前后端）