列表拖拽排序 ----vue.js

注意: 为了让元素可拖动,需要使用 HTML5 draggable 属性。

提示: 链接和图片默认是可拖动的,不需要 draggable 属性。

在拖放的过程中会触发以下事件:

  • 在拖动目标上触发事件 (源元素):
    • ondragstart - 用户开始拖动元素时触发
    • ondrag - 元素正在拖动时触发
    • ondragend - 用户完成元素拖动后触发
  • 释放目标时触发的事件:
    • ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
    • ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
    • ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
    • ondrop - 在一个拖动过程中,释放鼠标键时触发此事件

如果需要在拖动结束调用方法的话,可以使用ondragend方法实现。

列表排序实现代码

<div
  style="display:inline-block"
  v-for="(v, i) in selectTagList"
  :key="i"
  @dragstart="dragstart(i)"
  @dragenter="dragenter($event, i)"
  @dragover="dragover($event)"
  draggable
>
  <el-tag closable @close="closeTag(v, i)">{{ v.name }}</el-tag>
</div>
dragstart(index) {
  this.dragIndex = index;
},
dragenter(event, index) {
  event.preventDefault();
  if(this.dragIndex !== index) {
    if(this.enterIndex !== index) {
      const move = this.selectTagList[this.dragIndex];
          this.selectTagList.splice(this.dragIndex, 1);
          this.selectTagList.splice(index, 0, move);
          this.dragIndex = index;
        }
    else {
          this.enterIndex = index;
    }   } }, dragover(event) {
  event.preventDefault(); },

 

posted @ 2021-08-20 10:45  啦咯  阅读(562)  评论(1编辑  收藏  举报