HTML ondrop इवेंट एट्रिब्यूट: ड्रॉप पूरा होने पर कार्रवाई

HTML ondrop इवेंट एट्रिब्यूट तब ट्रिगर होता है जब एक ड्रैगेबल एलिमेंट या टेक्स्ट को एक वैध ड्रॉप टारगेट पर छोड़ा जाता है। यह ड्रैग-एंड-ड्रॉप ऑपरेशन का अंतिम चरण है जहां आप ड्रॉप किए गए डेटा को प्राप्त और प्रोसेस करते हैं। event.preventDefault() कॉल करना आवश्यक है ताकि ब्राउज़र का डिफ़ॉल्ट व्यवहार (जैसे लिंक नेविगेशन) रोका जा सके।

सिंटैक्स (Syntax)

<tagname ondrop="script"></tagname>

उदाहरण (Example)

यह उदाहरण ondrop के साथ ondrag (ड्रैग के दौरान) को दर्शाता है।

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      color: #000;
      height: 100vh;
      background-color: #FBAB7E;
      background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
      text-align: center;
      font-family: Arial, sans-serif;
    }
    .drop-target {
      display: inline-block;
      width: 200px;
      height: 200px;
      border: 3px dashed #fff;
      margin: 2rem;
      vertical-align: middle;
      padding: 20px;
      border-radius: 16px;
      background: rgba(255,255,255,0.1);
      transition: all 0.2s ease;
    }
    .drop-target.drag-over {
      border-color: #db133a;
      background: rgba(219, 19, 58, 0.2);
      transform: scale(1.02);
    }
    .circle {
      background: #db133a;
      height: 60px;
      width: 60px;
      border-radius: 50%;
      margin: 0 auto;
      cursor: grab;
      transition: transform 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      font-size: 0.8rem;
    }
    .circle.dragging {
      transform: scale(1.1);
      box-shadow: 0 8px 20px rgba(219, 19, 58, 0.4);
    }
    .show {
      color: #fff;
      font-size: 1.2rem;
      margin-top: 1rem;
      min-height: 80px;
      background: rgba(0,0,0,0.3);
      padding: 1rem;
      border-radius: 10px;
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;
      text-align: left;
    }
    .instructions {
      color: #fff;
      opacity: 0.9;
      margin: 1rem 0;
    }
    .event-badge {
      display: inline-block;
      padding: 0.25rem 0.75rem;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: bold;
      margin: 0.25rem;
    }
    .badge-drag { background: #2274A5; color: white; }
    .badge-drop { background: #23CE6B; color: white; }
    .badge-end { background: #db133a; color: white; }
  </style>
</head>
<body>
  <h1>HTML ondrop इवेंट एट्रिब्यूट डेमो</h1>
  
  <div class="drop-target" id="zone1" 
       ondrop="drop(event)" 
       ondragover="allowDrop(event)"
       ondragleave="handleDragLeave(event)">
    <p ondragstart="dragStart(event)" 
       ondrag="dragging(event)" 
       draggable="true" 
       id="dragItem" 
       class="circle">खींचें</p>
  </div>
  
  <div class="drop-target" id="zone2" 
       ondrop="drop(event)" 
       ondragover="allowDrop(event)"
       ondragleave="handleDragLeave(event)">
    <p>यहां छोड़ें</p>
  </div>
  
  <p class="instructions">लाल गोले को खींचकर दूसरे बॉक्स में छोड़ें</p>
  <div class="show" id="status">तैयार - लाल गोले को खींचना शुरू करें</div>

  <script>
    const status = document.getElementById('status');
    
    function dragStart(event) {
      event.dataTransfer.setData('text/plain', event.target.id);
      event.dataTransfer.effectAllowed = 'move';
      status.innerHTML = 'ondragstart ड्रैग शुरू - डेटा सेट किया गया';
    }
    
    function dragging(event) {
      // ड्रैग के दौरान लगातार फायर होता है
      status.innerHTML += '
ondrag ड्रैग जारी...';
      // नोट: बहुत बार फायर होता है, वास्तविक ऐप में थ्रॉटल करें
    }
    
    function allowDrop(event) {
      event.preventDefault(); // ड्रॉप अनुमति देने के लिए आवश्यक
      event.dataTransfer.dropEffect = 'move';
      event.currentTarget.classList.add('drag-over');
    }
    
    function handleDragLeave(event) {
      if (!event.currentTarget.contains(event.relatedTarget)) {
        event.currentTarget.classList.remove('drag-over');
      }
    }
    
    function drop(event) {
      event.preventDefault(); // ब्राउज़र डिफ़ॉल्ट (नेविगेशन) रोकने के लिए आवश्यक
      event.currentTarget.classList.remove('drag-over');
      
      const data = event.dataTransfer.getData('text/plain');
      const element = document.getElementById(data);
      
      if (element && element !== event.target) {
        event.currentTarget.appendChild(element);
        status.innerHTML = `
          ondrop ड्रॉप सफल!

          एलिमेंट ${data} ले जाया गया

          dropEffect: ${event.dataTransfer.dropEffect}
        `;
      } else {
        status.innerHTML = 'ondrop ड्रॉप हुआ लेकिन कोई वैध एलिमेंट नहीं मिला';
      }
    }
  </script>
</body>
</html>

आउटपुट (Output)

प्रारंभिक स्थिति:

ड्रैग के दौरान (ondrag फायर):

ड्रॉप पूरा होने पर (ondrop फायर):

ondrop में मुख्य कार्य

1. डिफ़ॉल्ट व्यवहार रोकें

function drop(event) {
  event.preventDefault(); // महत्वपूर्ण! ब्राउज़र को लिंक/फाइल खोलने से रोकता है
  // ...
}

2. ड्रॉप किया गया डेटा प्राप्त करें

const text = event.dataTransfer.getData('text/plain');
const url = event.dataTransfer.getData('text/uri-list');
const html = event.dataTransfer.getData('text/html');
const files = event.dataTransfer.files; // FileList ऑब्जेक्ट

3. ड्रॉप प्रभाव निर्धारित करें

// effectAllowed (स्रोत पर सेट) और dropEffect (टारगेट पर सेट) का संयोजन
// निर्धारित करता है कि कर्सर क्या दिखाता है और ऑपरेशन क्या है

// सामान्य संयोजन:
effectAllowed: 'copyMove' + dropEffect: 'copy'  → कॉपी (कर्सर: +)
effectAllowed: 'move' + dropEffect: 'move'      → मूव (कर्सर: तीर)
effectAllowed: 'link' + dropEffect: 'link'      → लिंक (कर्सर: लिंक आइकन)

ड्रॉप डेटा प्रकार और हैंडलिंग

व्यावहारिक उदाहरण

फाइल ड्रॉप जोन (अपलोड)

<div id="dropZone" 
     ondragover="handleDragOver(event)" 
     ondrop="handleDrop(event)"
     ondragleave="handleDragLeave(event)">
  फाइलें यहां खींचें
</div>

<script>
function handleDragOver(e) {
  e.preventDefault();
  e.dataTransfer.dropEffect = 'copy';
  e.currentTarget.classList.add('drag-over');
}

function handleDragLeave(e) {
  if (!e.currentTarget.contains(e.relatedTarget)) {
    e.currentTarget.classList.remove('drag-over');
  }
}

function handleDrop(e) {
  e.preventDefault();
  e.currentTarget.classList.remove('drag-over');
  
  const files = e.dataTransfer.files;
  if (files.length === 0) return;
  
  for (const file of files) {
    if (file.type.startsWith('image/')) {
      // छवि पूर्वावलोकन
      const reader = new FileReader();
      reader.onload = (e) => {
        const img = document.createElement('img');
        img.src = e.target.result;
        img.style.maxWidth = '200px';
        document.getElementById('previews').appendChild(img);
      };
      reader.readAsDataURL(file);
    }
    // सर्वर पर अपलोड करें
    uploadFile(file);
  }
}
</script>

लिस्ट रीऑर्डरिंग (मूव)

<ul id="sortableList">
  <li draggable="true" ondragstart="dragStart(event)">आइटम 1</li>
  <li draggable="true" ondragstart="dragStart(event)">आइटम 2</li>
  <li draggable="true" ondragstart="dragStart(event)">आइटम 3</li>
</ul>

<script>
let draggedItem = null;

function dragStart(e) {
  draggedItem = e.target;
  e.target.classList.add('dragging');
  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/plain', '');
}

document.getElementById('sortableList').addEventListener('dragover', (e) => {
  e.preventDefault();
  e.dataTransfer.dropEffect = 'move';
  const afterElement = getDragAfterElement(e.clientY);
  if (afterElement) {
    e.target.parentNode.insertBefore(draggedItem, afterElement);
  } else {
    e.target.parentNode.appendChild(draggedItem);
  }
});

function getDragAfterElement(y) {
  const items = [...document.querySelectorAll('li:not(.dragging)')];
  return items.reduce((closest, child) => {
    const box = child.getBoundingClientRect();
    const offset = y - box.top - box.height / 2;
    if (offset < 0 && offset > closest.offset) {
      return { offset, element: child };
    }
    return closest;
  }, { offset: Number.NEGATIVE_INFINITY }).element;
}
</script>

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

सभी आधुनिक ब्राउज़र (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 12+, IE 10+, Opera 12+)।

सर्वोत्तम प्रथाएं

• हमेशा ondragover और ondrop में event.preventDefault() कॉल करें।
• ondragleave में विजुअल स्टेट साफ़ करें (relatedTarget जांच के साथ)।
• dataTransfer.getData() केवल ondrop में विश्वसनीय है।
• टच डिवाइस के लिए: पॉइंटर इवेंट्स या लाइब्रेरी उपयोग करें (HTML5 DnD टच पर सीमित)।
• बड़े डेटा के लिए: डेटा ट्रांसफर के बजाय आईडी/रेफरेंस पास करें।