【HTML5】逐步分析如何实现拖放功能，面向前端开发者的复习指南
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖放功能演示</title>
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>这段代码演示了如何在HTML5中实现一个简单的拖放功能。首先，我们有一个可拖动的图片元素<img>，它通过设置draggable="true"属性来声明自己可以被拖动。通过ondragstart事件，我们定义了一个drag函数，它在拖动开始时被调用，并设置了要传输的数据（这里是图片的ID）。
然后，我们有一个可以接受拖动的元素<div>，它定义了ondrop和ondragover事件处理器。ondrop事件处理器drop函数在拖动操作结束时调用，并将图片元素追加到DIV中。ondragover事件处理器allowDrop函数在拖动过程中被调用，并调用event.preventDefault()来避免默认的拖放行为。
评论已关闭