HTML5的拖放(drag和drop)第二部分

👉 HTML5的拖放(drag和drop)第一部分内容请点击这里哦

放置元素

放置元素我们可以称为指定的放置目标。

网页或应用程序的大部分区域都是不可以放置数据的，默认不允许放置元素。如果需要设置允许放置，必须在dragenter或dragover事件中阻止默认事件。

有两种阻止方式：

<div ondragover="return false">
<div ondragover="event.preventDefault()">

想要让元素变成可释放元素的区域，必须给元素设置dragover和drop事件。

基础示例：

  <!-- 可放置元素 -->
  <div
    id="dropBox"
    ondrop="drop(event)"
    ondragover="allowDrop(event)">
  </div>
  <br>
  <!-- 可拖拽元素 -->
  <div
    id="dragBox"
    draggable="true"
    ondragstart="drag(event)">
    可以把我拖到矩形框中
  </div>

  <script>
    function allowDrop(ev) {
      ev.preventDefault();
    }
    function drag(ev) {
      ev.dataTransfer.setData("Text", ev.target.id);

    }
    function drop(ev) {
      ev.preventDefault();
      const data = ev.dataTransfer.getData("Text");
      ev.target.appendChild(document.getElementById(data));
    }
  </script>

上面示例代码展示了一个最基本的拖拽操作。

放置元素涉及到的事件

dragenter 事件

dragenter：当拖拽元素或选中的文本到一个可释放目标时触发。

dragleave 事件

dragleave：当拖拽元素或选中的文本离开一个可释放目标时触发。

dragleave事件不可取消。

上面dragenter的示例中，演示了在dragleave事件触发时取消样式的用法。

dragover 事件

dragover：当元素或选中的文本被拖到一个可释放目标上时触发（每几百ms触发一次）。

dragover在放置元素上触发。

drop 事件

drop：当元素或选中的文本在可释放目标上被释放时触发。

执行放置

当用户放开鼠标，拖放操作就会结束。如果在有效的放置目标元素上放开鼠标，即可放置成功。drop事件就会在目标元素上被触发。拖拽取消，不会触发drop事件。

在与拖拽有关的事件中，事件的dataTransfer属性一直存储着拖拽数据，我们使用getData()方法来获取数据。

function drop(ev) {
    ev.preventDefault();
    const data = ev.dataTransfer.getData("Text");
}

getData()方法接收一个参数，取回数据的类型。（即使用setData()方法设置的字符串值，如果不存在对应的数据类型数据，返回空字符串哦）

拖放demo

拖放基础demo：

👉 在线查看demo完整代码和效果请点击这里

dragenter事件触发时修改放置元素的样式；

dragleave事件触发时清空放置元素的样式;

drop放置事件触发时清空放置元素的样式，将拖拽元素添加到放置区域;

GIF 2023-7-23 9-09-45.gif

  <!-- 可放置元素 -->
  <div
    id="dropBox"
    ondrop="drop(event)"
    ondragenter="dragenter(event)"
    ondragleave="dragleave(event)"
    ondragover="allowDrop(event)">
  </div>
  <br>
  <!-- 可拖拽元素 -->
  <div
    id="dragBox"
    draggable="true"
    ondragstart="drag(event)">
    可以把我拖到矩形框中
  </div>

  <script>
    function allowDrop(ev) {
      ev.preventDefault();
    }
    function drag(ev) {
      ev.dataTransfer.setData("Text", ev.target.id);
    }
    function drop(ev) {
      ev.preventDefault();
      const data = ev.dataTransfer.getData("Text");
      ev.target.appendChild(document.getElementById(data));
      ev.target.style.backgroundColor = "";
    }
    function dragenter(ev) {
      ev.target.style.backgroundColor = "yellow";
    }
    function dragleave(ev) {
      ev.target.style.backgroundColor = "";
    }
  </script>

拖放进阶demo

👉 在线查看demo完整代码和效果请点击这里

GIF 2023-7-23 10-51-35.gif

拖放总结

总结一下整个拖放操作中会涉及到的属性、对象和事件等。

draggable属性

拖放涉及事件

DataTransfer对象

DataTransfer的方法

DataTransfer的属性

更多拖拽相关的内容，如果还有没涉及到的，评论区可以一起讨论哦。

❤️ 🧡 💛大家喜欢我写的文章的话，欢迎大家点点关注、点赞、收藏和转载！！
🔥我会持续更新前端相关的内容文章哦