एचटीएमएल ड्रैग एंड ड्रॉप एपीआई
HTML में किसी भी एलीमेंट को ड्रैग और ड्रॉप किया जा सकता है।
उदाहरण
W3Schools छवि को आयत में खींचें।
खींचें और छोड़ें
ड्रैग एंड ड्रॉप एक बहुत ही सामान्य विशेषता है। यह तब होता है जब आप किसी वस्तु को "पकड़" लेते हैं और उसे किसी भिन्न स्थान पर खींच लेते हैं।
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो ड्रैग एंड ड्रॉप का पूरी तरह से समर्थन करता है।
API | |||||
---|---|---|---|---|---|
Drag and Drop | 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
विशेषता को सत्य पर सेट करें:
<img draggable="true">
क्या खींचें - ondragstart और setData ()
फिर, निर्दिष्ट करें कि तत्व खींचे जाने पर क्या होना चाहिए।
उपरोक्त उदाहरण में, ondragstart
विशेषता एक फ़ंक्शन, ड्रैग (ईवेंट) को कॉल करती है, जो निर्दिष्ट करती है कि किस डेटा को खींचा जाना है।
dataTransfer.setData()
विधि डेटा प्रकार और खींचे गए डेटा का मान सेट करती है :
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
इस मामले में, डेटा प्रकार "पाठ" है और मान ड्रैग करने योग्य तत्व ("ड्रैग1") की आईडी है।
कहाँ गिराना है - ondragover
ईवेंट निर्दिष्ट करता है कि ondragover
खींचे गए डेटा को कहाँ छोड़ा जा सकता है।
डिफ़ॉल्ट रूप से, डेटा/तत्वों को अन्य तत्वों में नहीं छोड़ा जा सकता है। एक बूंद की अनुमति देने के लिए, हमें तत्व की डिफ़ॉल्ट हैंडलिंग को रोकना चाहिए।
event.preventDefault()
यह ऑनड्रैगओवर घटना के लिए विधि को कॉल करके किया जाता है :
event.preventDefault()
डू द ड्रॉप - ऑनड्रॉप
जब खींचा गया डेटा गिरा दिया जाता है, तो एक ड्रॉप घटना होती है।
ऊपर के उदाहरण में, ऑनड्रॉप विशेषता एक फ़ंक्शन, ड्रॉप (ईवेंट) को कॉल करती है:
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
कोड समझाया:
- डेटा के ब्राउज़र डिफॉल्ट हैंडलिंग को रोकने के लिए रोकथाम डीफॉल्ट() को कॉल करें (डिफ़ॉल्ट ड्रॉप पर लिंक के रूप में खुला है)
- खींचे गए डेटा को dataTransfer.getData() विधि से प्राप्त करें। यह विधि किसी भी डेटा को वापस कर देगी जो सेटडेटा () विधि में एक ही प्रकार पर सेट किया गया था
- ड्रैग किया गया डेटा ड्रैग किए गए तत्व की आईडी है ("ड्रैग1")
- खींचे गए तत्व को ड्रॉप तत्व में जोड़ें
और ज्यादा उदाहरण
उदाहरण
दो <div> तत्वों के बीच एक छवि को आगे और पीछे कैसे खींचें (और छोड़ें):