HTML Drag and Drop API

तत्वों को खींचना और गिराना

HTML Drag and Drop API

HTML ड्रैग एंड ड्रॉप एपीआई आपको किसी तत्व को खींचने और छोड़ने की अनुमति देता है।

प्रक्रिया:

नीचे दी गई जैसिफ़ टीम छवि को दूसरे आयत में खींचें और छोड़ें।

खींचें और छोड़ें

ड्रैग एंड ड्रॉप एक बहुत ही सामान्य सुविधा है। यह तब होता है जब आप किसी वस्तु को "पकड़" लेते हैं और उसे किसी अन्य स्थान पर खींचते हैं।

ब्राउज़र समर्थन

तालिका में संख्याएँ पहले ब्राउज़र संस्करण का प्रतिनिधित्व करती हैं जो ड्रैग और ड्रॉप का पूरी तरह से समर्थन करता है।

API Chrome Edge Firefox Safari Opera
Drag and Drop 4.0 9.0 3.5 6.0 12.0

HTML ड्रैग एंड ड्रॉप एपीआई उदाहरण

नीचे दिया गया उदाहरण एक सरल ड्रैग और ड्रॉप उदाहरण है:

उदाहरण

<!DOCTYPE HTML>
<html>
<head>
<script>
function dragstartHandler(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function dragoverHandler(ev) {
  ev.preventDefault();
}

function dropHandler(ev) {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>

<img id="img1" src="img_logo.gif" draggable="true" ondragstart="dragstartHandler(event)" width="336" height="69">

</body>
</html>

यह जटिल लग सकता है, लेकिन आइए ड्रैग एंड ड्रॉप इवेंट के विभिन्न हिस्सों को देखें।

किसी तत्व को खींचने योग्य बनाना

पहला: किसी तत्व को खींचने योग्य बनाने के लिए,draggableगुणtrueकरने के लिए सेट:

उदाहरण

<img id="img1" draggable="true">

या:

उदाहरण

<p id='p1'खींचने योग्य=सत्य'>खींचने योग्य पाठ</p>

क्या खींचें - ऑनड्रैगस्टार्ट और सेटडेटा()

इसके बाद, निर्दिष्ट करें कि तत्व खींचे जाने पर क्या होना चाहिए।

उपरोक्त उदाहरण में,<img>उपुपाबाद मेंondragstartविशेषता एक फ़ंक्शन है (dragstartHandler(ev)) कॉल, जो निर्दिष्ट करता है कि कौन सा डेटा निकालना है।

dataTransfer.setData()विधि निकाले जाने वाले डेटा का डेटा प्रकार और मान निर्धारित करती है:

उदाहरण

function dragstartHandler(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

इस मामले में, डेटा प्रकार "टेक्स्ट" है और ड्रैग करने योग्य तत्व में मान आईडी ("img1") है।

कहां छोड़ें - ऑनड्रैगओवर

<div>उपुपाबाद मेंondragoverविशेषता एक फ़ंक्शन है (dragoverHandler(ev)) कॉल, जो निर्दिष्ट करती हैं कि खींचा गया डेटा कहां छोड़ा जा सकता है।

डिफ़ॉल्ट रूप से, डेटा/तत्वों को अन्य तत्वों में नहीं छोड़ा जा सकता है। रिलीज़ की अनुमति देने के लिए, हमें तत्व में डिफ़ॉल्ट हेरफेर को ब्लॉक करना होगा।

यह हैondragoverघटना के लिएpreventDefault()यह विधि को कॉल करके किया जाता है:

उदाहरण

function dragoverHandler(ev) {
  ev.preventDefault();
}

ऑनड्रॉप - ऑनड्रॉप

जब खींचा गया डेटा गिरा दिया जाता है, adropघटना घटती है.

उपरोक्त उदाहरण में,<div>उपुपाबाद मेंondropगुणdropHandler(event)फ़ंक्शन को कॉल करना:

उदाहरण

function dropHandler(ev) {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

कोड स्पष्टीकरण:

  1. ब्राउज़र द्वारा डेटा की डिफ़ॉल्ट हैंडलिंग को रोकने के लिएpreventDefault()कॉल करें (यदि डिफ़ॉल्ट छोड़ दिया जाए तो लिंक के रूप में खुलता है)
  2. dataTransfer.getData()विधि से निकाला जाने वाला डेटा प्राप्त करें. इस तरहsetData()विधि उसी प्रकार का कोई भी डेटा सेट लौटाती है
  3. खींचा जाने वाला डेटा खींचे गए तत्व की आईडी ("img1") है
  4. खींचे गए तत्व को गिराए गए तत्व से जोड़ें

घटनाओं को खींचें

dragstart

जब तत्व खींचने लगता है

drag

जब तत्व खींचा जाता है

dragenter

जब खींचा हुआ तत्व जाल में प्रवेश करता है

dragover

जब खींचा गया तत्व जाल के ऊपर हो

dragleave

जब खींचा गया तत्व जाल छोड़ देता है

drop

जब खींचा गया तत्व छोड़ा जाता है

dragend

जब ड्रैग ऑपरेशन समाप्त हो जाए

इंटरैक्टिव दृष्टिकोण

तरीके:

नीचे दिए गए "खींचें और छोड़ें तत्व" को "लक्ष्य भाग" में खींचें और छोड़ें।


तत्व खींचें और छोड़ें
लक्ष्य भाग

कार्यप्रणाली नोट:

खींचने योग्य तत्व को स्रोत पर वापस ले जाया जा सकता है। पूरी प्रक्रिया की निगरानी की जाती है.

और ज्यादा उदाहरण

उदाहरण: <h1> तत्व को <div> तत्व पर खींचें और छोड़ें

<script>
function dragstartHandler(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function dragoverHandler(ev) {
  ev.preventDefault();
}

function dropHandler(ev) {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>

<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>

<h1 id="h1" draggable="true" ondragstart="dragstartHandler(event)">JassifTeam.com</h1>

उदाहरण: <a> तत्व को <div> तत्व पर खींचना और छोड़ना

<script>
function dragstartHandler(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function dragoverHandler(ev) {
  ev.preventDefault();
}

function dropHandler(ev) {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>

<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>

<a id="link1" href="https://jassifteam.com" draggable="true" ondragstart="dragstartHandler(event)">JassifTeam.com</a>

अभ्यास

❓किसी तत्व को खींचने योग्य बनाने के लिए निम्नलिखित में से किस विशेषता का उपयोग किया जाता है?

movable="true"
✗ ग़लत! "चलने योग्य" एक मान्य HTML विशेषता नहीं है
draggable="true"
✓ ठीक है! ड्रैगगेबल = "ट्रू" का उपयोग किसी तत्व को ड्रैग करने योग्य बनाने के लिए किया जाता है
drag="enabled"
✗ ग़लत! "खींचें" एक मान्य HTML विशेषता नहीं है