ondragend sự kiện kích hoạt khi một phần tử được kéo hoàn toàn.
Ví dụ
Bạn có thể thử chạy mã sau để tìm hiểu cách triển khai ondragend sự kiện trong JavaScript.
<!DOCTYPE HTML>
<html>
<head>
<style>
.drag {
float: left;
width: 100px;
height: 35px;
border: 2px dashed #876587;
margin: 15px;
padding: 10px;
}
</style>
</head>
<body>
<div class="drag" ondrop = "drop(event)" ondragover = "dropNow(event)">
<p ondragstart = "dragStart(event)" ondragend = "dragEnd(event)" draggable = "true" id = "dragtarget">Drag!</p>
</div>
<div class = "drag" ondrop = "drop(event)" ondragover = "dropNow(event)"></div>
<div id = "box"></div>
<p>Drag the left box to the right or drag the right box to the left.</p>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function dropNow(event) {
event.preventDefault();
}
function dragEnd(event) {
document.getElementById("box").innerHTML = "Dragging ends!";
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("box").innerHTML = "The element dropped successfully!";
}
</script>
</body>
</html>