vue 拖拽排序（前端+后端）

效果视频：https://live.csdn.net/v/299764?spm=1001.2014.3001.5501https://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>