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