एचटीएमएल5 ड्रॉप एंड ड्रॉ

कृपया CodeW3C.com चित्र को चतुर्भुज में खींचें।

ड्रैग और ड्रॉप

ड्रैग और ड्रॉप (ड्रैग और ड्रॉप) एक आम विशेषता है। यह कुछ भी उठाकर उसे अलग स्थान पर ले जाने के लिए जन्य है।

ड्रैग और ड्रॉप HTML5 मानक का हिस्सा है: कोई भी एलीमेंट ड्रैगेबल है。

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

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

API
ड्रैग और ड्रॉप 4.0 9.0 3.5 6.0 12.0

HTML ड्रैग और ड्रॉप उदाहरण

नीचे ड्रैग और ड्रॉप के बारे में एक साधारण उदाहरण है:

उदाहरण

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>

स्वयं आयात करें

यह कुछ ज्यादा जटिल लग सकता है, लेकिन हम ड्रैग और ड्रॉप इवेंट के सभी विभिन्न हिस्सों को अध्ययन करें।

एलीमेंट को ड्रैगेबल बनाएं

पहले: एक एलीमेंट को ड्रैगेबल बनाने के लिए, draggable एट्रिब्यूट को true रखें:

<img draggable="true">

ड्रैग और ड्रॉप की सामग्री - ondragstart और setData()

फिर, ड्रैग करते समय होने वाली कार्यों को निर्देशित करें।

ऊपरी उदाहरण में, ondragstart एट्रिब्यूट ने drag(event) फ़ंक्शन को कॉल किया, जो क्या डाटा ड्रैग करने का निर्देश देता है。

dataTransfer.setData() मेथड ड्रैगेबल डाटा के डाटा टाइप और मूल्य को सेट करता है:

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

इस उदाहरण में, डाटा टाइप "text" है और इसका मूल्य इस ड्रैगेबल एलीमेंट के id ("drag1") है।

कहाँ ड्रैग करें - ondragover

ondragover इवेंट निर्धारित करता है कि ड्रैग की गई डाटा कहाँ ड्रॉप किया जा सकता है。

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

इस कार्य को ondragover इवेंट के event.preventDefault() विधि द्वारा पूरा किया जाता है:

event.preventDefault()

ड्रॉप करें - ondrop

ड्रैग की गई डाटा को छोड़ते समय drop इवेंट होता है。

उपरोक्त उदाहरण में, ondrop गुण एक फ़ंक्शन को कॉल करता है, drop(event)：

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

कोड व्याख्या:

  • preventDefault() को कॉल करके डाटा के ब्राउज़र के डिफ़ॉल्ट हैंडलिंग को रोकें (drop इवेंट के डिफ़ॉल्ट व्यवहार लिंक के रूप में खोलना है)
  • dataTransfer.getData() विधि के द्वारा ड्रैग की गई डाटा प्राप्त करें।यह विधि setData() विधि में एक ही प्रकार के किसी भी डाटा को वापस देगी
  • ड्रैग की गई डाटा ड्रैग किए गए एलीमेंट का id (\
  • ड्रैग किए गए एलीमेंट को ड्रॉप एलीमेंट में जोड़ें

अधिक उदाहरण

चित्र को ड्रैग करें

दो <div> एलीमेंट के बीच चित्र को कैसे ड्रैग करें:

कृपया CodeW3C.com चित्र को चतुर्भुज में खींचें।

स्वयं आयात करें