How to make an image draggable in HTML? Last Updated : 24 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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> Output: Comment More infoAdvertise with us Next Article How to make an image draggable in HTML? A akashkumarsen4 Follow Improve Article Tags : Web Technologies HTML HTML5 HTML-Attributes HTML-Questions +1 More Similar Reads How to Add Image in HTML Table ? Adding images to an HTML table can enhance the visual appeal and functionality of your webpage. Whether it is for displaying product images in an e-commerce website or adding profile pictures in a user list, images in tables are a common requirement. In this article, we will explore two methods to a 2 min read How to Insert an Image in HTML? To insert an image in HTML, you can use <img> tag. This tag uses the src attribute to define the URL of the image file. We can also use CSS to insert image in HTML.Table of ContentUsing img TagUsing background-image propertyInsert an Image using img TagThe <img> tag is the primary method 1 min read How to Move Image in HTML? The <marquee> tag in HTML allows you to create scrolling effects for images, making it a simple way to add dynamic movement to your webpage. Images can scroll horizontally or vertically, with various attributes controlling the direction and behavior of the movement.Syntax<marquee> <im 2 min read How to Drag and Drop Images using HTML5 ? In this article, we will see how to create a drag and drop functionality using HTML5. Approach: The following approach will be implemented to Drag and Drop Images using HTML5. We have given a rectangle area and an image, the task is to drag the image and drop it into the rectangle.We have to enable 2 min read How to prevent dragging of ghost image ? While clicking on an image on a web page and trying to drag it from one point to another, often a replica of the image follows the cursor movement until it is dragged. This replica of the image is termed a ghost image. Due to personal preferences or requirements of the website, it may be required to 2 min read Like