终于弄懂了HTML5的拖放API(2)

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放置事件触发时清空放置元素的样式，将拖拽元素添加到放置区域;

  <!-- 可放置元素 -->
  <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完整代码和效果请点击这里

拖放总结

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

draggable属性

属性名	描述
draggable	用来标识元素是否可拖拽，是枚举类型属性

拖放涉及事件

对象	事件名	事件描述
可拖拽元素	drag	在拖动元素或选中文本时触发（每隔几百ms触发一次）
可拖拽元素	dragstart	在开始拖动元素或选中文本时触发
可拖拽元素	dragend	在拖放操作结束时触发（释放鼠标按钮或单击 esc键时）
放置元素	dragenter	在可拖拽元素或者被选中文本进入放置元素时触发
放置元素	dragleave	在可拖拽元素或选中文本离开放置元素时被触发
放置元素	dragover	在可拖拽元素或者选中文本被拖进一个放置元素时（每隔几百ms触发一次）
放置元素	drop	在元素或选中文本被放置在有效的放置元上时被触发

DataTransfer对象

DataTransfer的方法

方法名	描述
setData()	设置指定类型的数据。如果类型数据不存在，则将其添加到末尾，使其在类型列表中的最后一项是新的格式。如果该类型数据已经存在，则在相同位置替换现有数据
getData()	获取指定类型的数据，如果类型数据不存在，则返回空字符串
clearData()	删除给定类型的数据。类型参数可选。若类型为空或未指定，则删除所有类型的数据
setDragImage()	设置自定义的拖动图像

DataTransfer的属性

属性名	描述
types	只读，提供dragstart事件中设置的格式的strings数组
items	只读，包含所有拖动数据列表的DataTransferItemList对象
files	包含数据传输中可用的本地文件列表，如果未拖动文件，值为空列表
dropEffect	获取当前选定的拖放操作类型或者设置的为一个新的类型。值必须为 none, copy, link 或 move
effectAllowed	提供所有可用的操作类型。必须是 none, copy, copyLink, copyMove, link, linkMove, move, all 或者 uninitialized 之一

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

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