HTML ondragstart इवेंट एट्रिब्यूट: ड्रैग शुरू होने पर कार्रवाई

HTML ondragstart इवेंट एट्रिब्यूट तब ट्रिगर होता है जब उपयोगकर्ता किसी ड्रैगेबल एलिमेंट या टेक्स्ट को खींचना शुरू करता है। यह HTML5 ड्रैग-एंड-ड्रॉप API का हिस्सा है और dataTransfer ऑब्जेक्ट के माध्यम से ड्रैग किए जा रहे डेटा को सेट करने का प्राथमिक स्थान है।

सिंटैक्स (Syntax)

<tagname ondragstart="script"></tagname>

उदाहरण (Example)

पूर्ण ड्रैग-एंड-ड्रॉप डेमो: लाल गोले को दो बॉक्स के बीच खींचें।

<!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, box-shadow 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      font-size: 0.8rem;
      user-select: none;
    }
    .circle:active { cursor: grabbing; }
    .circle.dragging {
      transform: scale(1.1) rotate(5deg);
      box-shadow: 0 8px 20px rgba(219, 19, 58, 0.4);
      opacity: 0.9;
    }
    .show {
      color: #fff;
      font-size: 1.2rem;
      margin-top: 1rem;
      min-height: 60px;
      background: rgba(0,0,0,0.3);
      padding: 1rem;
      border-radius: 10px;
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;
    }
    .instructions {
      color: #fff;
      opacity: 0.9;
      margin: 1rem 0;
    }
  </style>
</head>
<body>
  <h1>HTML ondragstart इवेंट एट्रिब्यूट डेमो</h1>
  
  <div class="drop-target" id="zone1" 
       ondrop="drop(event)" 
       ondragover="allowDrop(event)"
       ondragleave="handleDragLeave(event)">
    <p ondragstart="dragStart(event)" 
       ondragend="dragEnd(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');
    const dragItem = document.getElementById('dragItem');
    let draggedElement = null;
    
    function dragStart(event) {
      draggedElement = event.target;
      event.target.classList.add('dragging');
      
      // ड्रैग डेटा सेट करें (आवश्यक)
      event.dataTransfer.setData('text/plain', event.target.id);
      event.dataTransfer.effectAllowed = 'move';
      
      // वैकल्पिक: कस्टम ड्रैग इमेज (डिफ़ॉल्ट एलिमेंट की कॉपी होती है)
      // event.dataTransfer.setDragImage(customElement, offsetX, offsetY);
      
      status.innerHTML = `
        <p>🚀 ondragstart फायर हुआ</p>
        <p>डेटा सेट: ${event.target.id}</code></p>
        <p>effectAllowed: move</code></p>
      `;
    }
    
    function dragEnd(event) {
      event.target.classList.remove('dragging');
      status.innerHTML += `
        <p>🏁 ondragend फायर हुआ</p>
        <p>ड्रॉप प्रभाव: ${event.dataTransfer.dropEffect}</code></p>
      `;
      draggedElement = null;
      
      // सभी ड्रॉप जोन से हाइलाइट हटाएं
      document.querySelectorAll('.drop-target').forEach(zone => {
        zone.classList.remove('drag-over');
      });
    }
    
    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 = `
          <p>✅ ड्रॉप सफल!</p>
          <p>एलिमेंट ${data}</code> को जोन में ले जाया गया</p>
          <p>dropEffect: ${event.dataTransfer.dropEffect}</code></p>
        `;
      }
    }
  </script>
</body>
</html>

1. ondragstart    → ड्रैग शुरू, dataTransfer सेट करें
2. ondrag         → ड्रैग के दौरान लगातार फायर होता है
3. ondragenter    → ड्रैगेबल वैध ड्रॉप टारगेट में प्रवेश करता है
4. ondragover     → ड्रॉप टारगेट पर ड्रैग हो रहा है (preventDefault आवश्यक)
5. ondragleave    → ड्रैगेबल ड्रॉप टारगेट छोड़ता है
6. ondrop         → ड्रॉप पूरा (preventDefault आवश्यक)
7. ondragend      → ड्रैग समाप्त (हमेशा फायर होता है, ड्रॉप हुआ या नहीं)

// स्रोत
element.ondragstart = (e) => {
  e.dataTransfer.setData('text/plain', JSON.stringify({id: 123, type: 'item'}));
  e.dataTransfer.effectAllowed = 'copy';
};

// टारगेट
dropzone.ondrop = (e) => {
  e.preventDefault();
  const data = JSON.parse(e.dataTransfer.getData('text/plain'));
  console.log('प्राप्त:', data);
};

dropzone.ondrop = (e) => {
  e.preventDefault();
  const files = e.dataTransfer.files; // FileList
  for (const file of files) {
    console.log(file.name, file.type, file.size);
    // अपलोड/प्रोसेस करें
  }
};

element.ondragstart = (e) => {
  const dragImage = document.createElement('div');
  dragImage.textContent = '📦 ले जाया जा रहा है...';
  dragImage.style.cssText = 'background: white; padding: 10px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.3);';
  document.body.appendChild(dragImage);
  e.dataTransfer.setDragImage(dragImage, 50, 25);
  setTimeout(() => dragImage.remove(), 0);
};