HTML5 provides a drag and drop facility. How can you make an image element draggable so that it can be dragged by the user on supported browsers?

Introduction / Context:
HTML5 introduced a standardized drag and drop API that allows users to drag elements such as images or links and drop them onto defined targets. This feature is often used in file uploads, custom editors, and interactive user interfaces. Knowing how to make an image draggable is a basic step in understanding the drag and drop system and is a common interview question for front end developers.

Given Data / Assumptions:
We are working with an img element in an HTML5 document.The question asks how to make the image draggable using the built in drag and drop facility.We assume that JavaScript can be used to respond to drag events.We are not focusing on drop targets or full drag and drop workflows, only on making the image itself draggable.

Concept / Approach:
In the HTML5 drag and drop model, an element becomes draggable when its draggable attribute is set to true. Some elements, such as links and images, are draggable by default in many browsers, but explicitly setting draggable to true is a reliable way to express intent. JavaScript event handlers such as ondragstart can then set data to be transferred during the drag. Styling can also be used to indicate that an element is draggable. The key point is that the draggable attribute is the standard HTML level control for this behavior, rather than layout changes or alternate markup.

Step-by-Step Solution:
First, recall that HTML5 drag and drop uses the draggable attribute on elements that can be dragged.Next, consider the img element and the requirement that the user should be able to drag it across the page or into a drop target.Then, remember that setting draggable to true clearly marks the element as draggable.After that, note that JavaScript event handlers such as dragstart, dragover, and drop are used to customize behavior.Finally, identify option A as the statement that describes adding draggable="true" and handling drag events, which aligns with the HTML5 model.

Verification / Alternative check:
To verify, you can create a simple HTML page with an img tag and add draggable="true". When you open the page in a modern browser and click and drag the image, you will see that it can be dragged. Adding a dragstart handler allows you to examine or modify the drag data. By contrast, changing table borders, CSS float values, or alt attributes does not in itself enable drag and drop. This practical test supports the correctness of option A.

Why Other Options Are Wrong:
Option B suggests wrapping the image in a table with a border, which affects layout and borders but not drag behavior. Option C mentions only CSS float properties, which change alignment but do not activate drag and drop. Option D converts the image to SVG, which might be useful for vector graphics but does not automatically make it draggable. Option E incorrectly states that setting the alt attribute to a specific word enables dragging, which is not part of the HTML5 specification.

Common Pitfalls:
Developers sometimes forget that drag and drop involves both the draggable source and the drop target, and they may enable dragging without providing any useful drop behavior. Another pitfall is relying only on browser default dragging without setting the draggable attribute, which can lead to inconsistent behavior across different browsers. It is also important to consider accessibility and touch device support, because the standard drag and drop API is primarily mouse oriented. Understanding the role of draggable="true" on elements like images is a solid foundation for building more advanced interactions.

Final Answer:
The correct answer is: Add the attribute draggable="true" to the img element and handle drag events in JavaScript.