How to make an image draggable in HTML5 ?

Last Updated : 15 May, 2023

Drag and drop is a very common and widely used feature in a modern-day website. It simply means to drag an image with the cursor and drop it to any other place. In this article, we are going to learn how to make an image draggable using HTML 5.

Making any HTML5 elements including images draggable is quite easy. We take the help of the ‘draggable’ attribute. It takes true, false, or auto as arguments. The default value is auto. The draggable property depends upon the browser. If we set the value true then the image is draggable. If we set the value false, the image is not draggable.

Syntax:

<img src="" alt="" draggable="true">

Example: In this example, we will use the draggable property for making the image draggable.

HTML

<!DOCTYPE html>
<html lang="en">
<body>
    <h2 style="color: green">GeeksforGeeks</h2>
    <p><b>Draggable image</b></p>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210810224356/geeksimage2-200x146.png"
         alt="image"
         draggable="true" />
</body>
</html>