HTML ondragend ईवेंट विशेषता तब ट्रिगर होती है जब उपयोगकर्ता HTML दस्तावेज़ में किसी HTML तत्व के किसी तत्व या टेक्स्ट को खींचना समाप्त कर देता है।
सिंटैक्स
निम्नलिखित वाक्य रचना है -
<tagname ondragend=”script”></tagname>
आइए हम HTML ondragend ईवेंट विशेषता का एक उदाहरण देखें—
उदाहरण
<!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 ondragend Event Attribute Demo</h1>
<div class="drop-target" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" ondragend="dragFinished(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);
document.querySelector(".show").innerHTML = "Started to drag the red circle.";
}
function dragFinished(event) {
document.querySelector(".show").innerHTML = "Finished dragging the red circle.";
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
event.target.appendChild(document.querySelector('.circle'));
}
</script>
</body>
</html> आउटपुट
अब यह देखने के लिए कि ondragend घटना विशेषता कैसे काम करती है, लाल घेरे को दो बक्सों के बीच खींचने और छोड़ने का प्रयास करें:
