Js中六种拖拽(拉)事件（drag 和 drop）

在JavaScript中，实现拖拽功能主要涉及到以下六个事件：

dragstart: 当元素被拖拽开始时触发。
drag: 元素正在被拖拽时重复触发。
dragend: 当拖拽操作结束时触发。
dragenter: 当拖拽的元素进入放置目标时触发。
dragover: 当拖拽的元素在放置目标上移动时重复触发。
drop: 当拖拽的元素在放置目标上释放时触发。

以下是实现一个简单拖拽功能的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and Drop Example</title>
<style>
#draggable {
  width: 100px;
  height: 100px;
  background: red;
  color: white;
  text-align: center;
  line-height: 100px;
  border: 2px dashed black;
  cursor: move;
}
 
#dropzone {
  width: 300px;
  height: 150px;
  background: green;
  color: white;
  text-align: center;
  line-height: 150px;
  border: 2px dashed black;
  margin-top: 10px;
  position: relative;
}
</style>
</head>
<body>
 
<div id="draggable" draggable="true">Drag me!</div>
<div id="dropzone">Drop here!</div>
 
<script>
const dragItem = document.getElementById('draggable');
const dropZone = document.getElementById('dropzone');
 
dragItem.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('text/plain', event.target.id);
});
 
dropZone.addEventListener('dragenter', function(event) {
  event.preventDefault();
});
 
dropZone.addEventListener('dragover', function(event) {
  event.preventDefault();
});
 
dropZone.addEventListener('drop', function(event) {
  event.preventDefault();
  const id = event.dataTransfer.getData('text/plain');
  dropZone.appendChild(document.getElementById(id));
});
</script>
 
</body>
</html>

在这个例子中，我们创建了一个可拖拽的元素draggable和一个可放置的区域dropzone。通过设置draggable="true"来使元素可拖拽。在dragstart事件中，我们使用dataTransfer.setData方法来存储被拖拽元素的ID。在dragenter和dragover事件中，我们调用event.preventDefault()来阻止默认的拖拽行为。在drop事件中，我们将被拖拽的元素追加到放置区域。

Js中六种拖拽(拉)事件（drag 和 drop）

评论已关闭

推荐阅读