एचटीएमएल ट्यूटोरियल

एचटीएमएल होम एचटीएमएल परिचय एचटीएमएल संपादक एचटीएमएल बेसिक एचटीएमएल तत्व एचटीएमएल गुण एचटीएमएल शीर्षक एचटीएमएल पैराग्राफ एचटीएमएल शैलियाँ एचटीएमएल स्वरूपण एचटीएमएल कोटेशन एचटीएमएल टिप्पणियाँ एचटीएमएल रंग एचटीएमएल सीएसएस एचटीएमएल लिंक एचटीएमएल छवियाँ एचटीएमएल फ़ेविकॉन एचटीएमएल टेबल्स एचटीएमएल सूचियां एचटीएमएल ब्लॉक और इनलाइन एचटीएमएल क्लासेस एचटीएमएल आईडी एचटीएमएल इफ्रेम्स एचटीएमएल जावास्क्रिप्ट HTML फ़ाइल पथ एचटीएमएल हेड एचटीएमएल लेआउट एचटीएमएल उत्तरदायी एचटीएमएल कंप्यूटर कोड HTML शब्दार्थ एचटीएमएल स्टाइल गाइड एचटीएमएल इकाइयां एचटीएमएल प्रतीक एचटीएमएल इमोजी एचटीएमएल वर्णसेट एचटीएमएल यूआरएल एनकोड एचटीएमएल बनाम एक्सएचटीएमएल

एचटीएमएल फॉर्म

एचटीएमएल फॉर्म एचटीएमएल फॉर्म गुण एचटीएमएल फॉर्म एलिमेंट्स एचटीएमएल इनपुट प्रकार एचटीएमएल इनपुट गुण HTML इनपुट फॉर्म विशेषताएँ

एचटीएमएल ग्राफिक्स

एचटीएमएल कैनवास एचटीएमएल एसवीजी

एचटीएमएल मीडिया

एचटीएमएल मीडिया एचटीएमएल वीडियो एचटीएमएल ऑडियो एचटीएमएल प्लग-इन एचटीएमएल यूट्यूब

एचटीएमएल एपीआई

एचटीएमएल जियोलोकेशन एचटीएमएल ड्रैग/ड्रॉप एचटीएमएल वेब स्टोरेज एचटीएमएल वेब वर्कर्स एचटीएमएल एसएसई

एचटीएमएल उदाहरण

एचटीएमएल उदाहरण एचटीएमएल प्रश्नोत्तरी एचटीएमएल व्यायाम एचटीएमएल प्रमाणपत्र एचटीएमएल सारांश एचटीएमएल अभिगम्यता

एचटीएमएल संदर्भ

एचटीएमएल टैग सूची एचटीएमएल गुण HTML वैश्विक गुण एचटीएमएल ब्राउज़र समर्थन एचटीएमएल घटनाक्रम एचटीएमएल रंग एचटीएमएल कैनवास एचटीएमएल ऑडियो/वीडियो एचटीएमएल सिद्धांत एचटीएमएल कैरेक्टर सेट एचटीएमएल यूआरएल एनकोड एचटीएमएल लैंग कोड HTTP संदेश HTTP तरीके पीएक्स से ईएम कन्वर्टर कुंजीपटल अल्प मार्ग

एचटीएमएल ड्रैग एंड ड्रॉप एपीआई


HTML में किसी भी एलीमेंट को ड्रैग और ड्रॉप किया जा सकता है।


उदाहरण

W3स्कूल

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> तत्वों के बीच एक छवि को आगे और पीछे कैसे खींचें (और छोड़ें):