HTML Drag and Drop API

Modern web applications में drag and drop functionality user experience को काफी बेहतर बनाती है। File upload areas, task boards, list reordering और interactive dashboards जैसे features HTML Drag and Drop API से possible होते हैं।

इस chapter में हम detail में समझेंगे कि HTML Drag and Drop API क्या है, यह कैसे काम करती है, required attributes और events कौन-कौन से हैं, data transfer कैसे होता है, common mistakes क्या हैं और real‑world examples कैसे implement किए जाते हैं।

HTML Drag and Drop API क्या है?

HTML Drag and Drop API एक Web API है जो browser को elements को mouse या pointer के माध्यम से drag करने और किसी target area में drop करने की सुविधा देती है।

यह API primarily JavaScript events पर based होती है और HTML elements पर लागू की जाती है।

Drag and Drop API कैसे काम करती है?

Basic workflow:

1. Element को draggable बनाया जाता है
2. Drag start event trigger होता है
3. Drag over के दौरान drop target allow करता है
4. Drop event पर data receive होता है

Draggable Attribute

किसी element को draggable बनाने के लिए draggable="true" attribute use किया जाता है।

Example

<div id="item" draggable="true">Drag Me</div>

By default:

• Images और links draggable होते हैं
• Other HTML elements नहीं होते

Drag and Drop API Events

HTML Drag and Drop API कई important events provide करती है।

1. dragstart

Drag process शुरू होते ही trigger होता है।

element.addEventListener('dragstart', function (e) {
  e.dataTransfer.setData('text', e.target.id);
});

2. drag

Drag के दौरान continuously fire होता है।

3. dragend

Drag complete होने के बाद trigger होता है।

4. dragenter

जब draggable element drop target में enter करता है।

5. dragover

Drop allow करने के लिए इस event में preventDefault() जरूरी होता है।

target.addEventListener('dragover', function (e) {
  e.preventDefault();
});

6. dragleave

जब draggable element drop target से बाहर जाता है।

7. drop

Actual drop action यहीं handle होती है।

target.addEventListener('drop', function (e) {
  e.preventDefault();
  const data = e.dataTransfer.getData('text');
  e.target.appendChild(document.getElementById(data));
});

DataTransfer Object

dataTransfer object drag और drop के बीच data pass करने के लिए use होता है।

Common Methods

• setData(type, data)
• getData(type)
• clearData()

Example

e.dataTransfer.setData('text/plain', 'Hello');

Complete Working Example

HTML

<div id="box1" draggable="true">Item</div>
<div id="box2">Drop Here</div>

JavaScript

const item = document.getElementById('box1');
const target = document.getElementById('box2');

item.addEventListener('dragstart', function (e) {
  e.dataTransfer.setData('text', e.target.id);
});

target.addEventListener('dragover', function (e) {
  e.preventDefault();
});

target.addEventListener('drop', function (e) {
  e.preventDefault();
  const id = e.dataTransfer.getData('text');
  target.appendChild(document.getElementById(id));
});

Use Cases

• File upload interface
• Kanban boards
• List sorting
• Dashboard widgets

Drag and Drop API Limitations

• Mobile devices में limited support
• Touch events के लिए additional handling जरूरी
• Complex UI में performance impact

Browser Compatibility

HTML Drag and Drop API modern browsers में supported है:

• Chrome
• Firefox
• Edge
• Safari (partial limitations)

Mobile browsers में inconsistent behavior हो सकता है।

Security Considerations

• External data drop करते समय validation जरूरी
• File drops में MIME type check करें
• Untrusted data directly render न करें

Common Mistakes

• dragover में preventDefault() न लगाना
• draggable attribute भूल जाना
• Mobile support ignore करना

Best Practices

• Clear visual feedback दें
• Drop targets clearly define करें
• Accessibility (keyboard users) का ध्यान रखें
• Mobile fallback implement करें

HTML Drag and Drop API और JavaScript

Drag and Drop API पूरी तरह JavaScript events पर dependent है। HTML सिर्फ structure provide करता है, logic JavaScript में handle होता है।

Conclusion

HTML Drag and Drop API interactive web interfaces बनाने के लिए एक powerful feature है। सही event handling, data transfer और security practices follow करके आप professional-level drag and drop functionality बना सकते हैं।

Modern web applications में यह API productivity और user experience दोनों को improve करती है।