HTML ondragleave इवेंट एट्रिब्यूट: ड्रॉप टारगेट छोड़ने पर कार्रवाई

HTML ondragleave इवेंट एट्रिब्यूट तब ट्रिगर होता है जब एक ड्रैगेबल एलिमेंट या टेक्स्ट एक वैध ड्रॉप टारगेट की सीमा छोड़ देता है। यह ड्रॉप जोन से विजुअल हाइलाइटिंग हटाने, ड्रैग स्थिति रीसेट करने, या ड्रैग-लीव एनालिटिक्स रिकॉर्ड करने के लिए उपयोगी है। ondragenter के विपरीत, यह बबल करता है।

सिंटैक्स (Syntax)

<tagname ondragleave="script"></tagname>

उदाहरण (Example)

यह उदाहरण ondragenter और ondragleave का उपयोग करके ड्रॉप जोन हाइलाइटिंग दर्शाता है।

<!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-active {
      border-color: #db133a;
      background: rgba(219, 19, 58, 0.3);
      box-shadow: 0 0 20px rgba(219, 19, 58, 0.3);
      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) rotate(5deg);
      box-shadow: 0 8px 20px rgba(219, 19, 58, 0.4);
    }
    .show {
      color: #fff;
      font-size: 1.2rem;
      margin-top: 1rem;
      min-height: 100px;
      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-log {
      font-family: monospace;
      font-size: 0.9rem;
      line-height: 1.8;
    }
    .event-enter { color: #23CE6B; }
    .event-leave { color: #f87171; }
    .event-drop { color: #ffeb3b; }
  </style>
</head>
<body>
  <h1>HTML ondragleave इवेंट एट्रिब्यूट डेमो</h1>
  
  <div class="drop-target" id="zone1" 
       ondrop="drop(event)" 
       ondragenter="dragEnter(event)"
       ondragleave="dragLeave(event)"
       ondragover="allowDrop(event)">
    <p ondragstart="dragStart(event)" 
       draggable="true" 
       id="dragItem" 
       class="circle">खींचें</p>
  </div>
  
  <div class="drop-target" id="zone2" 
       ondrop="drop(event)" 
       ondragenter="dragEnter(event)"
       ondragleave="dragLeave(event)"
       ondragover="allowDrop(event)">
    <p>ड्रॉप जोन 2</p>
  </div>
  
  <p class="instructions">लाल गोले को बॉक्स के अंदर/बाहर ले जाएं - enter/leave इवेंट्स देखें</p>
  <div class="show" id="status"></div>

  <script>
    const status = document.getElementById('status');
    let eventLog = [];
    
    function addEvent(type, message) {
      const colors = { enter: 'event-enter', leave: 'event-leave', drop: 'event-drop', start: 'event-drop' };
      eventLog.unshift(`[${type.toUpperCase()}] ${message}`);
      if (eventLog.length > 15) eventLog.pop();
      renderLog();
    }
    
    function renderLog() {
      status.innerHTML = '
' + eventLog.join('
') + '
';
    }
    
    function dragStart(event) {
      event.dataTransfer.setData('text/plain', event.target.id);
      event.dataTransfer.effectAllowed = 'move';
      event.target.classList.add('dragging');
      addEvent('start', `ड्रैग शुरू: ${event.target.id}`);
    }
    
    function dragEnter(event) {
      if (event.target.className.includes('drop-target')) {
        event.target.classList.add('drag-active');
        addEvent('enter', `ड्रॉप जोन में प्रवेश: ${event.target.id}`);
      }
    }
    
    function dragLeave(event) {
      // महत्वपूर्ण: relatedTarget जांचें - केवल तभी जब वास्तव में जोन छोड़ रहा हो
      // (बच्चे एलिमेंट पर मूव करने पर नहीं)
      if (event.target.className.includes('drop-target') && 
          !event.target.contains(event.relatedTarget)) {
        event.target.classList.remove('drag-active');
        addEvent('leave', `ड्रॉप जोन छोड़ा: ${event.target.id}`);
      }
    }
    
    function allowDrop(event) {
      event.preventDefault();
      event.dataTransfer.dropEffect = 'move';
    }
    
    function drop(event) {
      event.preventDefault();
      event.target.classList.remove('drag-active');
      
      const data = event.dataTransfer.getData('text/plain');
      const element = document.getElementById(data);
      
      if (element && element !== event.target) {
        event.target.appendChild(element);
        element.classList.remove('dragging');
        addEvent('drop', `ड्रॉप पूरा: ${data} → ${event.target.id}`);
      }
    }
  </script>
</body>
</html>

आउटपुट (Output)

प्रारंभिक स्थिति - लाल गोला जोन 1 में:

गोले को जोन 1 से जोन 2 में खींचते समय - enter/leave इवेंट्स फायर होते हैं:

जोन 2 में ड्रॉप करने के बाद:

ondragleave का महत्वपूर्ण व्यवहार

बबलिंग (Bubbling)

ondragleave एकमात्र ड्रैग इवेंट है जो **बबल करता है**। इसका मतलब:

• यदि ड्रॉप टारगेट में नेस्टेड चाइल्ड एलिमेंट्स हैं, तो चाइल्ड से पैरेंट पर मूव करने पर पैरेंट पर ondragleave फायर होगा।
• इसलिए event.target === event.currentTarget या !event.currentTarget.contains(event.relatedTarget) जांच आवश्यक है।

relatedTarget का सही उपयोग

function dragLeave(event) {
  // event.relatedTarget = वह एलिमेंट जिस पर माउस जा रहा है
  // event.currentTarget = वह एलिमेंट जिस पर लिसनर लगा है (ड्रॉप जोन)
  
  // केवल तभी प्रोसेस करें जब माउस वास्तव में ड्रॉप जोन छोड़ रहा हो
  if (!event.currentTarget.contains(event.relatedTarget)) {
    // विजुअल हाइलाइट हटाएं
    event.currentTarget.classList.remove('drag-active');
  }
  // अन्यथा: माउस ड्रॉप जोन के अंदर एक चाइल्ड से दूसरे चाइल्ड पर गया - इग्नोर करें
}

dragenter vs dragleave तुलना

सामान्य पैटर्न: ड्रॉप जोन हाइलाइटिंग

// CSS
.drop-zone {
  border: 2px dashed #ccc;
  transition: all 0.2s ease;
}
.drop-zone.drag-over {
  border-color: #007bff;
  background: rgba(0, 123, 255, 0.1);
  box-shadow: inset 0 0 20px rgba(0, 123, 255, 0.2);
}

// JavaScript
dropZone.addEventListener('dragenter', (e) => {
  e.preventDefault();
  dropZone.classList.add('drag-over');
});

dropZone.addEventListener('dragleave', (e) => {
  // केवल वास्तविक लीव पर हटाएं
  if (!dropZone.contains(e.relatedTarget)) {
    dropZone.classList.remove('drag-over');
  }
});

dropZone.addEventListener('drop', (e) => {
  e.preventDefault();
  dropZone.classList.remove('drag-over');
  // ड्रॉप प्रोसेस करें
});

उन्नत: नेस्टेड ड्रॉप जोन्स

जब ड्रॉप जोन्स नेस्टेड हों, dragleave बबलिंग के कारण पैरेंट पर भी फायर हो सकता है:

<div class="drop-zone" id="parent" ondragleave="handleLeave(event)">
  <div class="drop-zone" id="child" ondragleave="handleLeave(event)"></div>
</div>

function handleLeave(event) {
  // event.currentTarget बताता है किस एलिमेंट पर हैंडलर लगा है
  // event.target बताता है इवेंट कहां से शुरू हुआ
  
  // केवल currentTarget के लिए हाइलाइट हटाएं अगर माउस उसके बाहर गया
  if (!event.currentTarget.contains(event.relatedTarget)) {
    event.currentTarget.classList.remove('drag-over');
  }
}

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

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

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

• हमेशा event.currentTarget.contains(event.relatedTarget) जांचें।
• विजुअल स्टेट (हाइलाइट, कर्सर) को dragenter/dragleave जोड़ी में प्रबंधित करें।
• dragleave पर डेटा क्लियर न करें (ड्रॉप अभी हो सकता है); dragend पर करें।
• प्रदर्शन के लिए: dragleave में भारी ऑपरेशन न करें (बार-बार फायर हो सकता है)।