Thuộc tính sự kiện HTML ondragenter được kích hoạt khi phần tử hoặc văn bản có thể kéo đi 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 ondragenter=”script”></tagname>
Ví dụ
Hãy để chúng tôi xem một ví dụ về Thuộc tính sự kiện ondragenter HTML -
<!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 ondragenter Event Attribute Demo</h1>
<div class="drop-target" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" draggable="true" id="dragtarget" class='circle'></p>
</div>
<div class="drop-target" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" 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 dragEnter(event) {
if (event.target.className == "drop-target") {
event.target.style.background = "#db133a3d";
document.querySelector(".show").innerHTML = "Passed into the dropzone";
}
}
function dragLeave(event) {
if (event.target.className == "drop-target") {
event.target.style.background = "transparent";
document.querySelector(".show").innerHTML = "Passed out the dropzone";
}
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.querySelector('.circle'));
}
</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 ondragstart:
