📅 最后修改于: 2023-12-03 15:31:12.336000 🧑 作者: Mango
当拖动操作成功完成并且元素已被释放时，会触发 ondragend 事件。
该事件通常与 ondragstart、ondragover 和 ondrop 事件一起使用，以实现基于拖放的交互。
在元素上定义 ondragend 事件处理程序的语法如下：
object.ondragend = function(){myScript};
在下面的示例中，当将一个可拖动图片拖动到另一个元素上并释放时，会触发 ondragend 事件，从而将 ondragend 事件处理程序中的文本添加到页面上的一个段落中。
<!DOCTYPE html>
<html>
<head>
<title>ondragend事件示例</title>
<style>
#droptarget {
width: 200px;
height: 200px;
border: 1px solid black;
padding: 10px;
margin: 10px;
}
#draggable {
width: 100px;
height: 100px;
background-color: yellow;
border: 1px solid black;
padding: 10px;
margin: 10px;
cursor: move;
}
</style>
<script>
function dragstart_handler(ev) {
console.log("dragStart");
// 添加数据
ev.dataTransfer.setData("text/plain", ev.target.id);
// 设置透明度
ev.target.style.opacity = "0.4";
}
function dragend_handler(ev) {
console.log("dragEnd");
// 重置透明度
ev.target.style.opacity = "";
// 将文本添加到段落中
document.getElementById("demo").innerHTML += "The drag operation ended.<br>";
}
</script>
</head>
<body>
<div id="droptarget">
<p>将可拖动元素拖放到此处。</p>
</div>
<div id="draggable" draggable="true" ondragstart="dragstart_handler(event)" ondragend="dragend_handler(event)">
<p>我是可拖动的图片。</p>
</div>
<p id="demo"></p>
</body>
</html>
当用户完成一个拖动操作时，ondragend 事件会被触发。开发人员可以使用该事件来执行一些必要的清理和更新操作，比如将数据存储到数据库中或更新UI。
与其他拖放事件一起使用时，ondragend 事件可以帮助你构建更流畅、更可靠的基于拖放的用户界面。