h5实现拖放
实现拖放的基本步骤
HTML5 提供了拖放（Drag and Drop）API，通过以下步骤可以实现元素的拖放功能。
设置元素为可拖放
在需要拖动的元素上添加 draggable="true" 属性，例如：
<div id="drag-item" draggable="true">拖我</div>监听拖拽事件
为可拖放元素添加 dragstart 事件，并在事件处理函数中设置拖拽数据：
document.getElementById('drag-item').addEventListener('dragstart', function(e) {
e.dataTransfer.setData('text/plain', e.target.id);
});设置放置目标
为放置目标元素添加 dragover 和 drop 事件监听器。dragover 事件需要阻止默认行为以允许放置：
document.getElementById('drop-target').addEventListener('dragover', function(e) {
e.preventDefault();
});
document.getElementById('drop-target').addEventListener('drop', function(e) {
e.preventDefault();
const data = e.dataTransfer.getData('text/plain');
const draggedElement = document.getElementById(data);
e.target.appendChild(draggedElement);
});完整示例代码
以下是一个完整的拖放示例代码：
<!DOCTYPE html>
<html>
<head>
<title>拖放示例</title>
<style>
#drag-item {
width: 100px;
height: 100px;
background-color: lightblue;
text-align: center;
line-height: 100px;
margin: 10px;
}
#drop-target {
width: 200px;
height: 200px;
background-color: lightgray;
margin: 10px;
}
</style>
</head>
<body>
<div id="drag-item" draggable="true">拖我</div>
<div id="drop-target">放置区</div>
<script>
document.getElementById('drag-item').addEventListener('dragstart', function(e) {
e.dataTransfer.setData('text/plain', e.target.id);
});
document.getElementById('drop-target').addEventListener('dragover', function(e) {
e.preventDefault();
});
document.getElementById('drop-target').addEventListener('drop', function(e) {
e.preventDefault();
const data = e.dataTransfer.getData('text/plain');
const draggedElement = document.getElementById(data);
e.target.appendChild(draggedElement);
});
</script>
</body>
</html>进阶功能
自定义拖拽图像
可以通过 setDragImage 方法设置自定义拖拽图像：
document.getElementById('drag-item').addEventListener('dragstart', function(e) {
e.dataTransfer.setData('text/plain', e.target.id);
const dragImage = document.createElement('div');
dragImage.textContent = '正在拖拽';
dragImage.style.background = 'yellow';
e.dataTransfer.setDragImage(dragImage, 10, 10);
});限制放置目标
可以通过检查 dataTransfer 中的数据来决定是否允许放置：
document.getElementById('drop-target').addEventListener('drop', function(e) {
e.preventDefault();
const data = e.dataTransfer.getData('text/plain');
if (data === 'drag-item') {
const draggedElement = document.getElementById(data);
e.target.appendChild(draggedElement);
}
});兼容性注意事项
HTML5 拖放 API 在现代浏览器中支持良好，但在某些旧版本浏览器中可能需要额外的兼容性处理。建议在实际项目中测试目标浏览器的支持情况。
