The HTML5 drag API allows developers to create highly interactive web applications, allowing users to drag elements directly in the browser and drop them to other locations or target elements.
Set draggable elements
To make an HTML element draggable, add the draggable=”true” attribute to it.
<div id="draggableElement" draggable="true">Drag me!</div>Listen for drag events
The following drag-related event handlers can be bound to draggable elements:
dragstart: Triggered when the user starts dragging the element. In this event handler, you can set the event.dataTransfer object to carry the data that needs to be transferred during the drag process.drag: Triggered continuously during the drag process. Can be used to update the drag effect in real time (such as visual feedback following the mouse movement).dragend: Triggered when the user completes the drag operation (releases the mouse button). Can be used to clean up the state or perform operations after the drag ends.
const draggableElement = document.getElementById('draggableElement');
draggableElement.addEventListener('dragstart', handleDragStart);
draggableElement.addEventListener('drag', handleDrag);
draggableElement.addEventListener('dragend', handleDragEnd);
function handleDragStart(event) {
// Set drag data
event.dataTransfer.setData('text/plain', 'Some data to be transferred');
}
function handleDrag(event) {
// You can update the visual feedback of the drag here, such as changing the mouse style or showing a drag auxiliary graphic
}
function handleDragEnd(event) {
// Clean up the state or perform actions after the drag and drop is completed
}Set the target area
To make an element an area that can receive drag and drop, you need to listen to the following events:
dragenter: Triggered when the drag element enters the target area. Typically used to update visual feedback indicating that the area is ready for drag and drop.dragover: Fires continuously while the drag element is moving within the target area. Required to prevent default behavior (such as disabling text selection or link navigation) and set event.dataTransfer.dropEffect to specify the type of drag and drop operation (such as “copy”, “move”, or “link”).dragleave: Fires when the drag element leaves the target area. Used to restore the original style of the target area.drop: Fires when the user releases the drag element within the target area. In this event handler, you can extract data from event.dataTransfer and perform the actual drag and drop operation.
const dropTarget = document.getElementById('dropTarget');
dropTarget.addEventListener('dragenter', handleDragEnter);
dropTarget.addEventListener('dragover', handleDragOver);
dropTarget.addEventListener('dragleave', handleDragLeave);
dropTarget.addEventListener('drop', handleDrop);
function handleDragEnter(event) {
// Update visual feedback, such as changing the background color of the target area to indicate that drag and drop is acceptable
}
function handleDragOver(event) {
event.preventDefault(); // The default behavior must be prevented, otherwise the 'drop' event cannot be triggered
event.dataTransfer.dropEffect = 'copy'; // Specify the drag and drop effect
}
function handleDragLeave(event) {
// Restore the original style of the target area
}
function handleDrop(event) {
event.preventDefault(); // Prevent default behavior
const droppedData = event.dataTransfer.getData('text/plain'); // Get drag data
// Perform actual drag and drop operations, such as inserting data into the target area, updating the UI, etc.
console.log('Dropped data:', droppedData);
}Use dataTransfer object to transfer data
The event.dataTransfer object is the core of the drag operation. It is used to transfer data between the drag source and the target. You can use the setData() method to set data in the dragstart event handler and use the getData() method to get data in the drop event handler. The data type can be specified by the MIME type, such as 'text/plain', 'text/html', 'application/json', etc.
Custom drag image
You can use the event.dataTransfer.setDragImage() method in the dragstart event handler to specify a custom image as the icon displayed during dragging, instead of the default element image.
function handleDragStart(event) {
// ...
const dragIcon = document.createElement('img');
dragIcon.src = 'path/to/drag-icon.png';
event.dataTransfer.setDragImage(dragIcon, -10, -10); // Image position offset relative to the mouse
}
