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