JavaScript拖拽API，ondragstart、ondragover、ondragenter、ondrop，使用详细（JavaScript常用原生拖拽API）

谁践踏了优雅 2023-10-11 22:56 32阅读 0赞

#### 简述：JavaScript的拖拽api相必大家都不陌生，今天来分享下元素在拖动时触发的事件，顺便做下记录。 ####

#### 一、ondragstart事件 ####

#### **ondragstart事件在拖动元素时触发，通常用于设置拖动时的数据类型和数据。可以通过event.dataTransfer.setData()方法设置数据类型和数据。** ####

**示例代码：**

// HTML
    <div id="drag" draggable="true">拖动我</div>
    <div id="drop">放置区域</div>
    
    // JS
    var drag = document.getElementById("drag");
    // 拖拽开始 执行一次
    drag.addEventListener("dragstart", function(event) {
      event.dataTransfer.setData("text/plain", "这是拖动的数据");
    });

**二、ondragover事件**

**ondragover事件在拖动元素在目标元素上方时触发，通常用于防止默认的拖放行为。可以通过event.preventDefault()方法阻止默认行为。**

**示例代码：**

// HTML
    <div id="drag" draggable="true">拖动我</div>
    <div id="drop">放置区域</div>
    
    // JS
    var drop = document.getElementById("drop");
    // 拖拽经过 一直执行（类似Mousemove事件）
    drop.addEventListener("dragover", function(event) {
      event.preventDefault();
    });

**三、ondragenter事件**

**ondragenter事件在拖动元素进入目标元素时触发，通常用于设置拖动时的样式。**

**示例代码：**

// HTML
    <div id="drag" draggable="true">拖动我</div>
    <div id="drop">放置区域</div>
    
    // CSS
    #drop {
      border: 2px dashed #ccc;
    }
    #drop.dragover {
      border-color: #f00;
    }
    
    // JS
    var drop = document.getElementById("drop");
    // 拖拽进入 执行一次
    drop.addEventListener("dragenter", function(event) {
      drop.classList.add("dragover");
    });
    drop.addEventListener("dragleave", function(event) {
      drop.classList.remove("dragover");
    });

**四、ondrop事件**

**ondrop事件在拖动元素放置在目标元素上时触发，通常用于获取拖动时设置的数据。**

**示例代码：**

// HTML
    <div id="drag" draggable="true">拖动我</div>
    <div id="drop">放置区域</div>
    
    // JS
    var drop = document.getElementById("drop");
    // 拖拽放手 执行一次，table中的tr td默认禁止拖拽在上面
    drop.addEventListener("drop", function(event) {
      var data = event.dataTransfer.getData("text/plain");
      console.log(data);
    });

#### **下面通过一个课程表小案例，来实际应用一下，使用JavaScript拖拽API实现的课程表案例，效果如下：** ####

**![edabbfbe76294532a601d92e998bf2d2.gif][]**

**HTMl：**

<div class="demo_box">
        <div class="left" data-drop="move">
          <div data-effect="copy" draggable="true" class="subjects color1">语文</div>
          <div data-effect="copy" draggable="true" class="subjects color2">数学</div>
        </div>
        <table class="right_table" border="1">
          <thead>
            <tr>
              <td>星期一</td>
              <td>星期二</td>
              <td>星期三</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td data-drop="copy"></td>
              <td data-drop="copy"></td>
              <td data-drop="copy"></td>
            </tr>
            <tr>
              <td data-drop="copy"></td>
              <td data-drop="copy"></td>
              <td data-drop="copy"></td>
            </tr>
            <tr>
              <td data-drop="copy"></td>
              <td data-drop="copy"></td>
              <td data-drop="copy"></td>
            </tr>
            <tr>
              <td data-drop="copy"></td>
              <td data-drop="copy"></td>
              <td data-drop="copy"></td>
            </tr>
          </tbody>
    
        </table>
      </div>
      <script src="./draw.js"></script>
    
    
      // 用到的自定义属性
      // draggable="true"
      // data-effect="copy"
      // data-drop="copy"
      // data-drop="move"

**JavaScript:**

// 事件委托  获取父元素
    const containerBox = document.querySelector('.demo_box');
    // console.log(containerBox);
    
    let source;//定义source ，用于拿到节点‘
    
    // 拖拽开始 执行一次
    containerBox.ondragstart = (e) => {
      // console.log("start", e.target);
      // 拖拽事件改为移动 此事拖拽时元素上没有加号 
      // e.dataTransfer.effectAllowed = "move";
      // 默认是copy复制 此事拖拽时元素上有加号
      // e.dataTransfer.effectAllowed = "copy";
    
      // 自定义事件data-effect = "copy" ,此事件可共享, 所以
      e.dataTransfer.effectAllowed = e.target.dataset.effect;
      // 拿到节点
      source = e.target;
    };
    
    // 拖拽经过 一直执行，类似Mousemove事件
    containerBox.ondragover = (e) => {
      // console.log("over", e.target);
      //  阻止默认行为 这里就是开启表格的drop事件
      e.preventDefault();
    };
    
    function claerStyle() {
      // 清除之前的背景颜色over_bg
      document.querySelectorAll(".over_bg").forEach((node) => {
        node.classList.remove("over_bg");
      });
    }
    // 判断父元素
    function getDropNode(node) {
      while (node) {
        if (node.dataset && node.dataset.drop) {
          return node;
        }
        node = node.parentNode;
      }
    }
    // 拖拽进入 执行一次
    containerBox.ondragenter = (e) => {
      // 清除之前的背景调用
      claerStyle();
      // console.log("enter", e.target);
      // 改变背景颜色 添加over_bg时父子都会触发
      // e.target.classList.add('over_bg');
      // 所以给right里的td添加data-drop="copy"只接受复制
      // 给left添加data-drop="move"
      // const dropNode = e.target;
      // 判断父元素
      const dropNode = getDropNode(e.target);
      if (dropNode && dropNode.dataset.drop === e.dataTransfer.effectAllowed) {
        //如果相等 表示该节点能够接受目前拖拽的节点
        dropNode.classList.add('over_bg');
      }
    
    };
    
    // 拖拽放手 执行一次，table中的tr td默认禁止拖拽在上面，所以需要阻止默认行为；
    containerBox.ondrop = (e) => {
      // console.log("drop", e.target);
      // 首先清除之前的背景颜色
      claerStyle();
      const dropNode = getDropNode(e.target);
      if (dropNode && dropNode.dataset.drop === e.dataTransfer.effectAllowed) {
        //如果相等 表示该节点能够接受目前拖拽的节点
        // 分为两种情况
        if (dropNode.dataset.drop === "copy") {
          dropNode.innerHTML = '';
          // 克隆元素 source是上面拿到的元素
          const cloned = source.cloneNode(true);
          cloned.dataset.effect = "move";
          // 添加克隆的元素
          dropNode.appendChild(cloned);
        }
        else {
          source.remove();
        }
      }
    };

**视频讲解：**

**使用方式：拖拽API，课程表小案例讲解（复制后，打开抖音搜索）**

1.02 lPX:/ 拖拽API \# 前端开发工程师 \# JavaScript \# 编程 \# 程序员 \# web前端 \# 前端 \# 前端开发 https://v.douyin.com/UuyyMjc/

[edabbfbe76294532a601d92e998bf2d2.gif]: https://img-blog.csdnimg.cn/edabbfbe76294532a601d92e998bf2d2.gif