HTML5--拖拽API(含超经典例子)
HTML5 的拖拽 API 允许用户通过鼠标拖动来移动、选择或者对 webb 上的元素进行其他操作。下面是一个使用 HTML5 拖拽 API 的简单例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and Drop Example</title>
<style>
#dropZone {
width: 300px;
height: 300px;
border: 1px solid #000;
margin: 20px;
padding: 20px;
text-align: center;
line-height: 100px;
font-size: 24px;
}
</style>
</head>
<body>
<div id="dropZone">Drop Here</div>
<img src="image.png" id="dragItem" draggable="true" style="width:100px; margin:20px;">
<script>
const dropZone = document.getElementById('dropZone');
const dragItem = document.getElementById('dragItem');
// 允许拖动
dragItem.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text/plain', 'draggedItem');
});
// 进入拖拽元素的放置目标
dropZone.addEventListener('dragenter', function(event) {
event.preventDefault(); // 阻止默认行为
});
// 在放置目标上移动
dropZone.addEventListener('dragover', function(event) {
event.preventDefault(); // 阻止默认行为
});
// 在放置目标上释放
dropZone.addEventListener('drop', function(event) {
event.preventDefault(); // 阻止默认行为
dropZone.textContent = 'Dropped!';
});
</script>
</body>
</html>在这个例子中，我们创建了一个可拖动的图片元素 (<img id="dragItem" draggable="true">) 和一个可以放置拖动元素的区域 (<div id="dropZone">). 通过监听 dragstart, dragenter, dragover, 和 drop 事件，我们可以控制拖动行为并在合适的时候更新放置区域的内容。
评论已关闭