HTML ऑनड्रॉप ईवेंट विशेषता तब ट्रिगर होती है जब किसी HTML दस्तावेज़ में ड्रैग करने योग्य तत्व या टेक्स्ट को किसी मान्य ड्रॉप लक्ष्य पर छोड़ दिया जाता है।
सिंटैक्स
निम्नलिखित वाक्य रचना है -
<tagname ondrop=”script”></tagname>
आइए एचटीएमएल ऑनड्रॉप इवेंट एट्रीब्यूट—
. का एक उदाहरण देखेंउदाहरण
<!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> आउटपुट
ऑनड्रॉप इवेंट एट्रिब्यूट कैसे काम करता है, यह देखने के लिए अब दो बॉक्स के बीच लाल घेरे को ड्रैग और ड्रॉप करने का प्रयास करें।
