Thuộc tính sự kiện ondrop HTML được kích hoạt khi phần tử hoặc văn bản có thể kéo được thả vào mục tiêu thả hợp lệ trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
<tagname ondrop=”script”></tagname>
Hãy để chúng tôi xem một ví dụ về Thuộc tính sự kiện ondrop HTML−
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
}
.drop-target {
display: inline-block;
width: 150px;
height: 150px;
border: 2px solid #FFF;
margin: 1rem;
vertical-align: middle;
padding: 20px;
}
.circle {
background: #db133a;
height: 40px;
width: 40px;
border-radius: 50%;
}
.show {
color: #fff;
font-size: 1.2rem;
}
</style>
</head>
<body>
<h1>HTML ondrop Event Attribute Demo</h1>
<div class="drop-target" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" class="circle"></p>
</div>
<div class="drop-target" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p>Now try to drag and drop the red circle</p>
<div class="show"></div>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function dragging(event) {
document.querySelector(".show").innerHTML = "Circle is being dragged";
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
event.target.appendChild(document.querySelector('.circle'));
document.querySelector(".show").innerHTML = "Circle was dropped";
}
</script>
</body>
</html> Đầu ra
Bây giờ, hãy thử kéo và thả vòng tròn màu đỏ giữa hai hộp để quan sát cách hoạt động của thuộc tính sự kiện ondrop.
