Mastering HTML5’s Native Drag-and-Drop Capabilities

Historically, JavaScript libraries have allowed us to create drag-and-drop interfaces, but these lacked native browser integration.

HTML5 changes the game by providing us with a native way to build drag and drop interfaces, supplemented by JavaScript.

Let’s dive into the specifics of this functionality…

Compatibility Across Browsers

Let’s clarify compatibility before we dive in: HTML5 drag and drop is supported by all significant desktop browsers (including IE, with IE 5.5 offering partial support). However, popular mobile browsers haven’t jumped on this bandwagon just yet.

Understanding Drag and Drop Events

Different events are fired at each phase of the drag and drop process, letting the browser know which JavaScript functions to execute. These events are as follows:

• dragStart: This triggers when the drag action initiates.
• dragEnter: This occurs when the draggable element crosses over into the drop target zone.
• dragOver: Activates whenever the draggable element is moved while hovering over a potential drop zone.
• dragLeave: This event happens when the element being dragged exits a potential drop zone.
• drag: The mouse movement triggers this event consistently throughout the drag process.
• drop: This is the event that occurs when the draggable is actually dropped into the target.
• dragEnd: Signals the end of the drag process when the mouse button is released.

These events offer intricate control over the functionality and performance of your user interface.

Demystifying the dataTransfer Object

The dataTransfer object is where the magic of drag and drop happens, containing the data being transferred during the drag operation. Some key functionalities include:

• dataTransfer.effectAllowed=value: Specifies permissible actions, such as none, copy, copyLink, copyMove, link, linkMove, move, all, or uninitialized.
• dataTransfer.setData(format, data): Stores the given data and its associated format.
• dataTransfer.clearData(format): Erases all stored data for a given format.
• dataTransfer.setDragImage(element, x, y): Selects the image to be dragged, with x and y coordinates positioning the mouse pointer (0, 0 aligns it to the top left).
• data = dataTransfer.getData(format): Retrieves data for a specified format, as suggested by the name.

Building a Simple Drag and Drop Example

Now, let’s construct a straightforward drag and drop sample. With two small div blocks and a larger one, we’ll enable dragging the smaller blocks into the larger one and then moving them back out again.

Initiating the Drag

First off, we’ll set up our HTML. To make the divs draggable, we attach the draggable attribute like this:

<div id="boxA" draggable="true"></div>

Next, we lay out the JavaScript function that springs into action at the start of the drag:

function dragStart(ev) {
 ev.dataTransfer.effectAllowed='move';
 ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
 ev.dataTransfer.setDragImage(ev.target,100,100);
 return true;
}

Here, we specify the ‘move’ effect, set the dragging data to the element’s ID, choose the element’s image as our drag image, and place the cursor centrally on the dragged element. A ‘true’ return value wraps this up.

Completing the Drop

To prepare a drop target, it must be receptive to three events: ‘dragEnter’, ‘dragOver’, and the ‘drop’ event. We’ll integrate these into our HTML for our div with the ID of ‘big’:

<div id="big" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></div>

With event listeners set, let’s define the associated functions, starting with ‘dragEnter’ and ‘dragOver’:

function dragEnter(ev) {
 ev.preventDefault();
 return true;
}
function dragOver(ev) {
 ev.preventDefault();
}

For ‘dragEnter’, we prevent the default browser behavior, which could be complemented with UI changes to signal a valid drop zone. The ‘dragOver’ function serves to enable dropping by negating the default behavior.

Now, for the ‘drop’ function:

function dragDrop(ev) {
 var data = ev.dataTransfer.getData("Text");
 ev.target.appendChild(document.getElementById(data));
 ev.stopPropagation();
 return false;
}

This function retrieves the data, attaches the dragged element to our target div, halts event propagation, and concludes with a ‘false’ to prevent any default browser actions.

Adding a New Drop Target

In our example, we’ve made it possible to move the divs back to their starting positions. To add another drop target, we simply append the necessary event listeners as so:

<section id="section" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">

Just like that, our divs can be effortlessly dragged back to their initial spots.

Final Thoughts

While numerous drag-and-drop applications utilize JavaScript libraries for simplicity, exploring HTML5 and JavaScript techniques reveals the potential advantages of native solutions.

Have you crafted a drag-and-drop interface yourself? How do you feel HTML5’s native options stack up against JavaScript-only approaches? Share your experiences in the comments below.

Featured image/thumbnail, drop image courtesy of photophilde.