HTML5 拖放事件

这篇文章距离上次修改已过434天，其中的内容可能已经有所变动。

HTML5 拖放事件包括拖动元素时触发的事件，如下所示：

dragstart: 用户开始拖动元素时触发
drag: 元素正在被拖动时触发
dragend: 用户完成元素拖动后触发
dragenter: 拖动的元素进入其容器或另一个可放置目标时触发
dragover: 拖动的元素在容器内移动时触发
dragleave: 拖动的元素离开放置目标时触发
drop: 在一个放置目标上释放拖动的元素时触发

以下是一个简单的示例，演示如何使用这些事件：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and Drop Example</title>
<style>
#dropZone {
  width: 300px;
  height: 300px;
  border: 2px dashed #ccc;
  margin: 20px;
  padding: 20px;
  text-align: center;
  line-height: 100px;
  font-size: 24px;
}
</style>
</head>
<body>
 
<div id="dropZone">Drop files here</div>
 
<script>
// 获取放置区域元素
var dropZone = document.getElementById('dropZone');
 
// 绑定拖放事件
dropZone.addEventListener('dragstart', function(event) {
  // 设置要拖动的数据
  event.dataTransfer.setData('text/plain', event.target.id);
});
 
dropZone.addEventListener('dragover', function(event) {
  // 阻止默认行为以允许放置
  event.preventDefault();
});
 
dropZone.addEventListener('drop', function(event) {
  // 阻止默认行为以避免打开文件
  event.preventDefault();
  // 获取拖动的数据
  var id = event.dataTransfer.getData('text/plain');
  alert('Dropped element with id: ' + id);
});
</script>
 
</body>
</html>

在这个例子中，我们创建了一个可以放置文件的区域，并绑定了拖放相关的事件处理程序。当用户开始拖动一个元素并进入放置区域时，dragenter 和 dragover 事件会阻止默认行为，以便允许元素被放置。当用户在放置区域内释放元素时，drop 事件会被触发，并通过 event.dataTransfer.getData 获取被拖动元素的信息。

HTML5 拖放事件

评论已关闭

推荐阅读