zoukankan      html  css  js  c++  java
  • 列表拖拽排序 ----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(); },
  • 相关阅读:
    git 派生子项目、分支、主干、合并
    C# 动态调用WebService
    sql导出数据库表结构Excel
    SQL Server 删除重复记录
    ThoughtWorks笔试题之Merchant's Guide To The Galaxy解析
    设置电信光猫为桥接模式
    Finder(文件内容搜索工具)
    数独解法(C#)
    Boyer-Moore (C#)
    Dijstra(C#)
  • 原文地址:https://www.cnblogs.com/linliu/p/15165432.html
Copyright © 2011-2022 走看看