How to Drag and Drop Images using HTML5 ? Last Updated : 15 May, 2023 Comments Improve Suggest changes Like Article Like Report 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 ondrop="drop(event)" and ondragover="allowDrop(event)" to make the rectangle for image insertion.The image link is inserted in the HTML page using <img> src attribute.Whenever we are going to insert the image, we have to enable draggable="true". Also, enable ondragstart="drag(event)" so that this image can be draggable along with setting the image width and height. Example: In this example, we will see how to drag and drop an image. HTML <!DOCTYPE HTML> <html> <head> <title> How to Drag and Drop Images using HTML5 ? </title> <style> #div1 { width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; } </style> </head> <body> <p> Drag the GeeksforGeeks image into the rectangle: </p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> </div> <br> <img id="drag1" src= "https://media.geeksforgeeks.org/wp-content/uploads/20211014104411/gfg2.png" draggable="true" ondragstart="drag(event)" width="336" height="69"> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Drag and Drop Images using HTML5 ? S sounetraghosal2000 Follow Improve Article Tags : HTML HTML5 HTML-Attributes HTML-Questions Similar Reads How to make an image draggable in HTML? 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 1 min read Drag and Drop Sortable List Using HTML CSS & JavaScript The Drag and Drop Sortable List Project in JavaScript allows users to easily reorder items in a list using drag-and-drop functionality. This interactive tool enhances user experience by enabling smooth, dynamic list organization, ideal for applications like task managers or shopping lists.What we ar 5 min read How to create an image acting as a submit button using HTML5 ? In this article, we will learn how to create an image that acts as a submit button i.e. whenever we click on an image in the form, it will be automatically submitted to the server. The default type of <input> type attribute is text. Here, we use a simple approach to complete the task. Syntax 2 min read HTML Drag and Drop Drag and Drop is a very interactive and user-friendly concept that makes it easier to move an object to a different location by grabbing it. This allows the user to click and hold the mouse button over an element, drag it to another location, and release the mouse button to drop the element there. W 5 min read Web API HTML Drag and Drop In this article, we will learn Web API HTML drag and drop functioning with various methods.There is the HTML Drag and Drop feature which is used to make user interaction by enabling them to drag some boxes made with any tag and drop them like text and images into the dropping regions that are create 4 min read Like