【HTML5】逐步分析如何实现拖放功能，八年前端开发心路历程
在HTML5中，实现拖放功能主要涉及到draggable属性和相关的drag和drop事件。以下是一个简单的实现拖放功能的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖放示例</title>
<style>
#draggable {
width: 150px;
height: 150px;
background: skyblue;
color: white;
text-align: center;
line-height: 150px;
border: 2px dashed #333;
cursor: move;
}
#droppable {
width: 300px;
height: 150px;
background: green;
color: white;
text-align: center;
line-height: 150px;
border: 2px dashed #333;
margin-top: 10px;
position: relative;
}
#droppable:hover {
background: darkgreen;
}
</style>
</head>
<body>
<div id="draggable" draggable="true">拖动我</div>
<div id="droppable">放置区域</div>
<script>
const dragItem = document.getElementById('draggable');
const dropZone = document.getElementById('droppable');
dragItem.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text/plain', event.target.id);
});
dropZone.addEventListener('dragover', function(event) {
event.preventDefault(); // 阻止默认行为
event.dataTransfer.dropEffect = 'move'; // 设置拖放视觉效果
});
dropZone.addEventListener('drop', function(event) {
event.preventDefault();
const data = event.dataTransfer.getData('text');
dropZone.appendChild(document.getElementById(data));
});
</script>
</body>
</html>在这个例子中，我们创建了两个div元素，一个用于拖动（draggable），另一个作为放置目标（droppable）。通过设置draggable="true"来使元素可拖动。
使用dragstart事件来设置要传输的数据（这里是被拖动元素的ID）。dragover事件用来阻止默认行为并设置拖放的视觉效果。drop事件处理程序实际上在放置操作时执行，它会获取数据并将元素移动到放置目标中。
评论已关闭