html5的drag属性实现拖放

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

HTML5中实现拖放功能主要使用draggable属性和对应的drag和drop事件。

以下是一个简单的示例，展示如何使用draggable属性和dragstart、dragover和drop事件来实现一个拖放功能：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and Drop Example</title>
<style>
#draggable {
  width: 150px;
  height: 150px;
  background: skyblue;
  color: white;
  text-align: center;
  line-height: 150px;
  border: 2px dashed #333;
  cursor: move;
  margin: 20px;
}
 
#droppable {
  width: 300px;
  height: 150px;
  background: green;
  color: white;
  text-align: center;
  line-height: 150px;
  border: 2px dashed #333;
  margin: 20px;
}
</style>
</head>
<body>
 
<div id="draggable" draggable="true">Drag me!</div>
<div id="droppable">Drop here!</div>
 
<script>
const dragItem = document.getElementById('draggable');
const dropArea = document.getElementById('droppable');
 
dragItem.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('text/plain', event.target.id);
});
 
dropArea.addEventListener('dragover', function(event) {
  event.preventDefault(); // Prevent default to allow drop
});
 
dropArea.addEventListener('drop', function(event) {
  event.preventDefault();
  const data = event.dataTransfer.getData('text/plain');
  event.target.appendChild(document.getElementById(data));
});
</script>
 
</body>
</html>

在这个例子中，我们创建了两个div元素，一个可以拖动(draggable)，另一个可以放置(droppable)。通过为可拖动元素添加draggable="true"属性，并为放置区域添加事件监听器来处理dragover和drop事件。dragstart事件用于设置要传输的数据（这里是被拖动元素的ID）。在drop事件中，我们阻止默认行为，并将被拖动元素追加到放置区域。

html5的drag属性实现拖放

评论已关闭

推荐阅读