HTML5 Drag & Drop API

Home / Topic / HTML5 Drag & Drop API / Making Draggable Elements

Making Draggable Elements

In the previous chapter, we learned the basics of the Drag and Drop API and set up an initial environment. Now we will dive deeper into how to enable draggable elements in HTML using the draggable attribute and manage the dragstart event to initiate interaction.

Enabling a Draggable Element

Any HTML element can be made draggable by adding the attribute draggable="true". This attribute indicates that the element can be moved within the page.

Example of a Draggable Element

html

"This HTML example enables the draggable attribute on a div, allowing it to be dragged. The text inside the div indicates that the element can be interacted with."

It is important to note that while some elements like images and links are draggable by default, other elements such as div or span explicitly require the draggable="true" attribute.

Introduction to the `dragstart` Event

The dragstart event is the first step in a drag-and-drop operation. This event is triggered when the user starts dragging an element, and it is the ideal time to prepare data transfer.

Code to Manage the `dragstart` Event

javascript

"This code uses the dragstart event to set up data that will be transferred during the drag-and-drop operation. The setData method of the dataTransfer object stores a message that can be retrieved later, while a message in the console confirms that the event has started."

Explanation of the `DataTransfer` Object

The DataTransfer object is fundamental in the Drag and Drop API. It allows storing data that can be retrieved later during the interaction.

setData Method: Stores data in a specific format like text/plain or application/json.
getData Method: Retrieves stored data.

javascript

"In this snippet, we use setData to save a simple text in the dataTransfer object. This text will be accessible during the drop event."

Enhancing User Experience

The user experience can be improved by applying dynamic styles to the element while it is being dragged.

Change the Style During Dragging

javascript

"This code dynamically adjusts the opacity of the element while it is being dragged and restores it when the dragging ends, providing visual feedback to the user."

Additional Validations

It is possible to add validations to ensure that only certain elements are draggable.

Validate Draggable Elements

javascript

"In this example, we check if the element has the draggable attribute before allowing the dragstart event. If it does not, we prevent the interaction and log a message in the console."

Practical Exercise

Create a page with multiple elements, some enabled to be dragged and others not. Use the draggable attribute and add validations so only selected elements can initiate the dragstart event.

Conclusion

In this chapter, we learned how to enable draggable elements with the draggable attribute and manage the dragstart event to initiate interaction. We also explored how to use the DataTransfer object to store data and how to enhance user experience with dynamic styles.

In the next chapter, we will explore the additional events that occur during the drag-and-drop cycle, such as drag, dragover, and drop. Join us to continue building this functionality!

Back to previous chapter

Mark as read and continue