HTML Drag and Drop
In this article, we will know the HTML Drag & Drop, also understand its implementation with the help of examples.
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. In HTML 5 Drag and Drop are much easier to code and any element in it is draggable.
Drag and Drop Events: There are various Drag and Drop events, some of them are listed below:
- ondrag: It is used to use when the element or text selection is being dragged in HTML.
- ondragstart: It is used to call a function, drag(event), that specifies what data to be dragged.
- ondragenter: It is used to determine whether or not the drop target is to accept the drop. If the drop is to be accepted, then this event has to be canceled.
- ondragleave: It occurs when the mouse leaves an element before a valid drop target while the drag is occurring.
- ondragover: It specifies where the dragged data can be dropped.
- ondrop: It specifies where the drop has occurred at the end of the drag operation.
- ondragend: It occurs when the user has finished dragging an element.
Procedure for Drag and Drop:
- Step 1: Make an object draggable
- First set the draggable attribute to true for that element to be draggable <img draggable = “true”>
- Then, specify what should happen when the element is dragged. The ondragstart attribute calls a function, drag(event), that specifies what data to be dragged. The dataTransfer.setData() method sets the data type and the value of the dragged data
- The event listener ondragstart will set the allowed effects (copy, move, link, or some combination).
- Step 2: Dropping the Object
- The ondragover event specifies where the dragged data can be dropped. By default, data/elements cannot be dropped in other elements. To allow a drop, it must prevent the default handling of the element. This is done by calling the event.preventDefault() method
- Finally, the drop event, which allows the actual drop to be performed
Example 1: This example shows the drag & drop of an image in HTML.
HTML
<!DOCTYPE HTML><html><head> <style> #getData { width: 250px; height: 200px; padding: 10px; border: 1px solid #4f4d4d; } </style> <script> function allowDrop(even) { even.preventDefault(); } function drag(even) { even.dataTransfer.setData("text", even.target.id); } function drop(even) { even.preventDefault(); var fetchData = even.dataTransfer.getData("text"); even.target.appendChild(document.getElementById(fetchData)); } </script></head><body> <h3>Drag the GeekforGeeks image into the rectangle:</h3> <div id="getData" ondrop="drop(event)" ondragover="allowDrop(event)"> </div> <br> <img id="dragData" src="gfg.png" draggable="true" ondragstart="drag(event)" width="250" height="200"> </body></html> |
Output:
Dragging the image into the box
The Data Transfer Object: The data transfer property is used when the whole process of Drag and Drop happens. It is used to hold the dragged data from the source and drop it to the desired location. These are the properties associated with it:
- dataTransfer.setData(format, data): It is used to set the data to be dragged.
- dataTransfer.clearData(format): It is used for calling this function with no argument that clears all the data. Calling it with a format argument removes only that specific data.
- dataTransfer.getData(format): It returns the data of the specified format. If there is no such data, returns the empty string.
- dataTransfer.types: This property returns an array of all the formats that were set in the dragstart event.
- dataTransfer.files: It is used to return all the files that are to be dropped.
- dataTransfer.setDragImage(element, x, y): It is used to display an existing image as the drag image instead of the default image alongside the cursor. The coordinates specify the drop location.
- dataTransfer.addElement(element): It is used to add the specified element to be drawn as a drag feedback image.
- dataTransfer.effectAllowed(value): It will tell the browser that only the listed type(s) of operations are allowed for the user. The property can be set to the following values: none, copy, copyLink, copyMove, link, linkMove, move, all, and uninitialized.
- dataTransfer.dropEffect(value): It is used to control the feedback that the user is given during the dragenter and dragover events. When the user hovers over a target element, the browser’s cursor will indicate what type of operation is going to take place (e.g. a copy, a move, etc.). The effect can take on one of the following values: none, copy, link, move.
Example 2: This example illustrates the use of the draggable property of the element.
HTML
<!DOCTYPE HTML><html><head> <title>Drag and Drop box</title> <script> function allowDrop(ev) { ev.preventDefault(); } function dragStart(ev) { ev.dataTransfer.setData("text", ev.target.id); } function dragDrop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> <style> #box { margin: auto; width: 50%; height: 200px; border: 3px solid green; padding: 10px; } #box1, #box2, #box3 { float: left; margin: 5px; padding: 10px; } #box1 { width: 50px; height: 50px; background-color: #F5B5C5; } #box2 { width: 100px; height: 100px; background-color: #B5D5F5; } #box3 { width: 150px; height: 150px; background-color: #BEA7CC; } p { font-size: 20px; font-weight: bold; text-align: center; } .gfg { font-size: 40px; color: #009900; font-weight: bold; text-align: center; } </style></head><body> <div class="gfg">GeeksforGeeks</div> <p>Drag and drop of boxes</p> <div id="box"> <div id="box1" draggable="true" ondragstart="dragStart(event)"> </div> <div id="box2" draggable="true" ondragstart="dragStart(event)"> </div> <div id="box3" ondrop="dragDrop(event)" ondragover="allowDrop(event)"> </div> </div></body></html> |
Explanation:
- Start the drag by setting the draggable property of the element to be dragged to true.
- Get the dragged data with the dataTransfer.getData() method. This method will return any data that was set to the same type in the setData() method.
- Call event.preventDefault() method to allow the dropping of elements in other elements by preventing the default handling of the element.
- The element is stored in the variable data which we append into the drop element.
Output:
Example 3: This example illustrates the image drag and drop.
HTML
<!DOCTYPE HTML><html><head> <script> function allowDrop(ev) { ev.preventDefault(); } function dragStart(ev) { ev.dataTransfer.setData("text", ev.target.id); } function dragDrop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> <style> .div1 { width: 240px; height: 75px; padding: 10px; border: 1px solid black; background-color: #F5F5F5; } p { font-size: 20px; font-weight: bold; } .gfg { font-size: 40px; color: #009900; font-weight: bold; } </style></head><body> <div class="gfg">GeeksforGeeks</div> <p>Image Drag and Drop in boxes</p> <div class="div1" ondrop="dragDrop(event)" ondragover="allowDrop(event)"> <img id="drag1" src= draggable="true" ondragstart="dragStart(event)" width="220" height="70"> </div> <br> <div class="div1" ondrop="dragDrop(event)" ondragover="allowDrop(event)"> </div></body></html> |
Output:
Dragging the image into another box
Example 4: This example demonstrates dragging the text in the rectangular box in HTML.
HTML
<!DOCTYPE HTML><html><head> <title>Draggable Text</title> <style> .dropbox { width: 350px; height: 40px; padding: 15px; border: 1px solid #292828; } h1 { color: green; } </style> <script> function droppoint(event) { var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); event.preventDefault(); } function allowDropOption(event) { event.preventDefault(); } function dragpoint(event) { event.dataTransfer.setData("Text", event.target.id); } </script></head><body> <center> <h1>GeeksforGeeks</h1> <h3>Drag the text in the rectangle</h3> <div class="dropbox" ondrop="droppoint(event)" ondragover="allowDropOption(event)"> </div> <p id="drag1" draggable="true" ondragstart="dragpoint(event)"> GeeksforGeeks: A computer science portal for geeks. </p> </center></body></html> |
Output:
Dragging the text into the box
Supported Browser:
- Google Chrome 93.0
- Microsoft Edge 93.0
- Firefox 92.0
- Opera 78.0
- Safari 14.1
Please Login to comment...