• 周日. 6月 26th, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

列表拖拽排序 —-vue.js

admin

11月 28, 2021

注意: 为了让元素可拖动,需要使用 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(); },

发表评论

您的电子邮箱地址不会被公开。