Examples Showing Drag and Drop in HTML
1. Drag and Drop of Image in HTML:
Example: 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
2. Implementation of Draggable Property:
Example: This example shows the drag & drop of an image in HTML.
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(); let 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">w3wiki</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> |
Output:
3. Using Image Drag and Drop:
Example: Implementation of Drop and Drop in HTMl using the Images.
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">w3wiki</div> <p>Image Drag and Drop in boxes</p> <div class="div1" ondrop="dragDrop(event)" ondragover="allowDrop(event)"> <img id="drag1" src="https://media.w3wiki.org/wp-content/cdn-uploads/Geek_logi_-low_res.png" 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
4. Dragging Using Text in Rectangular Box:
Example: Implementation of dragging the text in the rectangular box.
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>w3wiki</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)"> w3wiki: A computer science portal for geeks. </p> </center></body> </html> |
Output:
Dragging the text into the box
Supported Browser:
- Google Chrome 4.0
- Microsoft Edge 9.0
- Firefox 3.5
- Opera 6.0
- Safari 12.0
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.
Table of Content
- Drag and Drop Events
- The Data Transfer Object
- Approach for Drag and Drop in HTML
- Examples Showing Drag and Drop in HTML
In HTML5 Drag and Drop are much easier to code and any element in it is draggable.