Drag and Drop API
The HTML Drag and Drop API enables applications to use drag-and-drop features in browsers. The user may select draggable elements with a mouse, drag them to a droppable element, and drop them by releasing the mouse button.
1. Making Elements Draggable
To make an element draggable, you set the draggable attribute to true.
<div id="item" draggable="true">Drag me!</div>2. Drag Events
There are several events fired during the drag-and-drop operations.
On the Draggable Element
dragstart: Fired when the user starts dragging an element. This is where you set the data to be transferred.drag: Fired repeatedly while the element is being dragged.dragend: Fired when the drag operation ends (whether successful or not).
On the Drop Target
dragenter: Fired when the dragged element enters a valid drop target.dragover: Fired repeatedly while the dragged element is over the drop target. Crucial: You must callevent.preventDefault()here to allow dropping.dragleave: Fired when the dragged element leaves the drop target.drop: Fired when the element is dropped on the target.
3. The DataTransfer Object
The DataTransfer object is used to hold the data that is being dragged during a drag and drop operation. It is accessible via event.dataTransfer.
setData(format, data): Sets the data type and value.getData(format): Retrieves the data for a specific type.clearData([format]): Removes the data.
4. Basic Example
<div id="drag-source" draggable="true" style="border: 1px solid black; padding: 10px;">
Drag Source
</div>
<div id="drop-target" style="border: 1px solid red; padding: 20px; margin-top: 10px;">
Drop Target
</div>const source = document.getElementById('drag-source');
const target = document.getElementById('drop-target');
// 1. Handle Drag Start
source.addEventListener('dragstart', (event) => {
// Store the ID of the element being dragged
event.dataTransfer.setData('text/plain', event.target.id);
event.dataTransfer.effectAllowed = 'move';
console.log('Drag started');
});
// 2. Allow Drop (dragover)
target.addEventListener('dragover', (event) => {
// Prevent default to allow drop
event.preventDefault();
event.dataTransfer.dropEffect = 'move';
});
// 3. Handle Drop
target.addEventListener('drop', (event) => {
event.preventDefault();
// Get the ID of the dragged element
const data = event.dataTransfer.getData('text/plain');
const draggedElement = document.getElementById(data);
// Move the element to the drop target
event.target.appendChild(draggedElement);
console.log('Dropped');
});5. Files Drag and Drop
You can also drag files from the operating system into the browser.
target.addEventListener('drop', (event) => {
event.preventDefault();
if (event.dataTransfer.files.length > 0) {
// Handle files
const files = event.dataTransfer.files;
console.log('Files dropped:', files);
}
});programming/javascript/vanilla/javascript programming/javascript/vanilla/events programming/javascript/vanilla/file-api