<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.draggable {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
cursor: grab;
}
.dropzone {
width: 200px;
height: 200px;
border: 2px dashed gray;
margin: 10px;
}
</style>
<title>HTML5 拖放示例</title>
</head>
<body>
<div id="dragElement" class="draggable" draggable="true" ondragstart="drag(event)">
拖我
</div>
<div id="dropZone" class="dropzone" ondragover="allowDrop(event)" ondrop="drop(event)">
放在这里
</div>
<script>
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function allowDrop(ev) {
ev.preventDefault();
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var draggedElement = document.getElementById(data);
ev.target.appendChild(draggedElement);
}
</script>
</body>
</html>
在这个示例中，有一个可拖动的元素（带有 draggable="true" 属性）和一个拖放目标区域。当用户拖动可拖动元素时，dragstart 事件被触发，并且将数据（在这里是元素的 id）设置为数据传输的内容。然后，当用户将元素拖到放置区域时，dragover 事件触发，可以使用 preventDefault() 阻止默认的处理方式，最后在 drop 事件中，将拖动的元素放置到目标区域。
这只是一个简单的例子，实际上你可以通过拖放功能实现更复杂的交互，包括拖动文件、拖动列表项重新排序等。拖放功能对于提高用户体验和交互性非常有用。
转载请注明出处：http://www.zyzy.cn/article/detail/12428/HTML