ondragstart घटना

DOM घटना DragEvent

विभावना और उपयोग

ondragstart इवेंट उपयोगकर्ता एलीमेंट या टेक्स्ट को खींचना शुरू करते हैं जब होता है。

ड्रैग एंड ड्रॉप HTML5 में एक बहुत ही सामान्य क्षमता है। यह तो एक ऐसी क्षमता है जब आप एक ऑब्जेक्ट को "उठाते हैं" और उसे अलग स्थान पर खींचते हैं। अधिक जानकारी के लिए, हमारे बारे में जानें HTML5 खींचने और छोड़नेका उपयोग करें。

नोट:यदि आप एलीमेंट को ड्रैगेबल बनाना चाहते हैं, तो वैश्विक HTML ट्यूटोरियल HTML5 draggable गुण.

सूचना:मूलभूत रूप से, लिंक और इमेजेज ड्रैगेबल हैं और draggable गुण की आवश्यकता नहीं है。

ड्रैग एंड ड्रॉप ऑपरेशन के विभिन्न चरणों में, कई इवेंट उपयोग में लिए जाते हैं और हो सकते हैं:

ड्रैगेबल टारगेट (स्रोत एलीमेंट) पर ट्रिगर किए जाने वाले इवेंट:

  • ondragstart - जब उपयोगकर्ता एलीमेंट को खींचना शुरू करता है तो होता है
  • ondrag - जब एलीमेंट खींचा जाता है तो होता है
  • ondragend - जब उपयोगकर्ता खींचे गए एलीमेंट को पूरा करता है तो होता है

डिस्टीनेशन टारगेट पर ट्रिगर किए जाने वाले इवेंट:

  • ondragenter - जब खींचे गए एलीमेंट डिस्टीनेशन टारगेट में प्रवेश करता है तो होता है
  • ondragover - जब खींचे गए एलीमेंट डिस्टीनेशन टारगेट पर होता है तो होता है
  • ondragleave - जब खींचे गए एलीमेंट डिस्टीनेशन टारगेट से बाहर होता है तो होता है
  • ondrop - जब खींचे गए एलीमेंट को डिस्टीनेशन टारगेट पर रखा जाता है तो होता है

उदाहरण

जब उपयोगकर्ता <p> एलीमेंट को खींचना शुरू करता है तो जेसक्रिप्ट चलाया जाता है:

<p draggable="true" ondragstart="myFunction(event)">मुझे खींचो!</p>

आप खुद सबसे प्रयास करें

पृष्ठ के नीचे अधिक TIY उदाहरण हैं。

व्याकरण

एचटीएमएल में:

<एलीमेंट ondragstart="myScript">

आप खुद सबसे प्रयास करें

जेसक्रिप्ट में:

ऑब्जेक्ट.ondragstart = function(){myScript};

आप खुद सबसे प्रयास करें

जेसक्रिप्ट में, addEventListener() विधि का उपयोग करके:

ऑब्जेक्ट.addEventListener("dragstart", myScript);

आप खुद सबसे प्रयास करें

नोट:इंटरनेट एक्सप्लोरर 8 या अधिक पुरानी संस्करण इसका समर्थन नहीं करते addEventListener() method.

Technical details

Bubble: Supported
Cancelable: Supported
Event type: DragEvent
Supported HTML tags: All HTML elements
DOM version: Level 3 Events

Browser support

The numbers in the table indicate the first browser version that fully supports the event.

Event Chrome IE Firefox Safari Opera
ondragstart 4.0 9.0 3.5 6.0 12.0

More examples

For all possible drag-and-drop event demonstrations:

<p draggable="true" id="dragtarget">Drag me!</p>
<div class="droptarget">Drop here!</div>
<script>
/* ----------------- 在拖动目标上触发的事件 ----------------- */
document.addEventListener("dragstart", function(event) {
  // dataTransfer.setData()方法设置被拖拽数据的数据类型和值
  event.dataTransfer.setData("Text", event.target.id);
  // 开始拖动 p 元素时输出一些文本
  document.getElementById("demo").innerHTML = "Started to drag the p element.";
  // 更改可拖动元素的不透明度
  event.target.style.opacity = "0.4";
});
// 拖动 p 元素时，更改输出文本的颜色
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});
// 完成拖动 p 元素后输出一些文本并重置不透明度
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = "Finished dragging the p element.";
  event.target.style.opacity = "1";
});
/* ----------------- ड्रॉप टारगेट पर ट्रिगर की गई इवेंट ----------------- */
// ड्रैग करने वाला p एलिमेंट droptarget में प्रवेश करते समय, DIV के बॉर्डर स्टाइल को बदलें
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});
// डिफ़ॉल्ट रूप से, डाटा/एलिमेंट को अन्य एलिमेंट में ड्रॉप नहीं किया जा सकता। ड्रॉप को अनुमति देने के लिए, हमें एलिमेंट के डिफ़ॉल्ट व्यवहार को रोकना होगा
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// ड्रैग करने वाला p एलिमेंट droptarget से बाहर निकलते समय, DIV के बॉर्डर स्टाइल को पुन:सेट करें
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* On drop - ब्राउज़र के डाटा के मूलभूत व्यवहार को रोकें (डिफ़ॉल्ट ड्रॉप पर लिंक में खोला जाएगा) */
आउटपुट टेक्स्ट और DIV के बॉर्डर रंग को पुन:सेट करें
dataTransfer.getData() विधि का उपयोग करके खींचे हुए डाटा प्राप्त करें
खींचे हुए डाटा खींचे हुए एलिमेंट के id (")drag1(") है
खींचे हुए एलिमेंट को ड्रॉप एलिमेंट में जोड़ दिया जाएगा
*/
document.addEventListener("drop", function(event) {
  event.preventDefault();
  if ( event.target.className == "droptarget" ) {
    document.getElementById("demo").style.color = "";
    event.target.style.border = "";
    var data = event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
  }
});
</script>

आप खुद सबसे प्रयास करें

संबंधित पृष्ठ

HTML पाठ्यक्रम: HTML5 खींचने और छोड़ने

HTML संदर्भ मैनुअल: HTML draggable गुण

DOM घटना DragEvent