HTML5 ड्रॉप एंड ड्रॉ

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

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

ड्रैग और ड्रॉप (Drag and Drop) एक आम विशेषता है। यह इशारा करता है कि आप किसी चीज़ को पकड़कर उसे अलग स्थान पर ले जाते हैं।

ड्रैग और ड्रॉप 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()

जगह दें - 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 ("drag1") है
  • खींचे गए एलीमेंट को जगहां जोड़ें

और अधिक उदाहरण

चित्र को खींच-छोड़

दो <div> एलीमेंट के बीच चित्र को कैसे खींच-छोड़ सकते हैं:

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

अपने आप सामने पर ले आएं