HTML5 拖放功能实现：drag/drop 事件详解与 Firefox 兼容性问题解决

HTML5 拖放 API 概述

拖放（Drag and Drop）是 HTML5 标准的重要组成部分。本文将从五个核心维度进行阐述：如何使元素成为可拖拽对象、如何配置放置目标、拖拽过程中涉及的事件类型、放置目标接收的事件，以及拖拽源与目标之间的数据交互机制。

拖拽源事件处理

拖拽源元素相关事件

dragstart：在用户开始拖动元素时立即触发。
drag：在 dragstart 事件触发后，只要元素仍在被拖动，该事件就会持续触发。
dragend：当拖动操作结束（无论成功放置还是取消）时触发。

放置目标事件处理

放置目标元素相关事件

dragenter：当被拖拽的元素进入放置目标区域时触发。
dragover：当被拖拽的元素在放置目标区域内移动时触发，其行为类似于 mouseover 事件。
drop：当被拖拽的元素在放置目标区域内释放（放下）时触发。

启用元素拖拽

配置可拖拽元素

在 HTML5 中，img 元素默认支持拖拽操作。对于其他类型的元素，必须显式设置 draggable 属性为 true，才能启用拖拽功能。

配置放置目标

HTML 元素默认不能作为放置目标。要使其接受拖放，必须在 dragenter 和 dragover 事件处理程序中调用 preventDefault() 以阻止默认行为，从而允许 drop 事件触发。


droptarget.addEventListener('dragenter', function(event) {
  event.preventDefault();
});
droptarget.addEventListener('dragover', function(event) {
  event.preventDefault();
});

数据传递机制

拖拽数据传递机制

拖放事件对象中包含一个 dataTransfer 对象，用于在拖拽源和目标之间传递数据。该对象主要提供 setData() 和 getData() 两个方法。setData() 用于存储拖拽数据，必须在 dragstart 事件中调用；getData() 用于获取数据，通常在 drop 事件中调用。


// drapobj 拖拽元素
// droptarget 放置目标
dragobj.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('id', dragobj.id);
});
droptarget.addEventListener('drop', function(event) {
  var id = event.dataTransfer.getData('id');
  var obj = document.getElementById(id);
  event.preventDefault();
  this.appendChild(obj);
});

完整示例代码


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>HTML5 拖拽</title>
</head>

<body>
  <div draggable="true"></div>
  <div style="height: 150px" id="dragobj" draggable="true">
    <img src="c_06.jpg" alt="">
  </div>
  <div id="droptarget" style="width: 150px; height: 150px;background-color: #eee;"></div>
</body>
<script>
var droptarget = document.getElementById('droptarget');
var dragobj = document.getElementById('dragobj');

// drapobj 拖拽元素
// droptarget 放置目标
dragobj.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('id', dragobj.id);
});
droptarget.addEventListener('dragenter', function(event) {
  event.preventDefault();
});
droptarget.addEventListener('dragover', function(event) {
  event.preventDefault();
});
droptarget.addEventListener('drop', function(event) {
  var id = event.dataTransfer.getData('id');
  var obj = document.getElementById(id);
  event.preventDefault();
  this.appendChild(obj);
});
</script>

</html>

Firefox 兼容性问题与解决

潜在问题

在 Firefox 浏览器中，直接拖拽图片默认会在新窗口或标签页中打开该图片。根据《JavaScript 高级程序设计》中的建议，在 drop 事件中调用 preventDefault() 未能完全解决此行为。

解决方案：将图片设置为 div 元素的背景图片，而非使用 img 标签。此时将包含背景图的 div 作为拖拽源，即可避免 Firefox 的默认打开行为。

最终修正代码


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>HTML5 拖拽</title>
  <style>
  div {
    width: 120px;
    height: 136px;
  }
  
  #dragobj {
    background: url('c_06.jpg') no-repeat;
  }
  
  #droptarget {
    background-color: #eee;
  }
  </style>
</head>

<body>
  <div id="dragobj" draggable="true">
  </div>
  <div id="droptarget"></div>
</body>
<script>
var droptarget = document.getElementById('droptarget');
var dragobj = document.getElementById('dragobj');

// drapobj 拖拽元素
// droptarget 放置目标
dragobj.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('id', dragobj.id);
});
droptarget.addEventListener('dragenter', function(event) {
  event.preventDefault();
});
droptarget.addEventListener('dragover', function(event) {
  event.preventDefault();
});
droptarget.addEventListener('drop', function(event) {
  var id = event.dataTransfer.getData('id');
  var obj = document.getElementById(id);
  event.preventDefault();
  this.appendChild(obj);
});
</script>

</html>

以上内容涵盖了 HTML5 拖放功能的核心实现细节与常见兼容性处理，希望能为开发者提供有益参考。

HTML5 原生拖放 API 实现指南：事件、数据传递与浏览器兼容处理