How to use drag and drop in HTML5?


Grabbing an object and moving it to a different position is made simpler with the drag and drop idea, which is very dynamic and user-friendly. This enables the user to click and drag an element to another position before letting go of the mouse button to drop it there.

Drag and drop events

Drag and Drop event consists of various types of events, some of them are listed below.

  • ondrag − is a term used in HTML to describe when an element or text selection is being moved around.

  • ondragstart − is a function that is called when a drag operation is about to begin.

  • ondragenter − It is used to decide if the drop target will accept the drop or not. This event must be cancelled if the drop is accepted.

  • ondragleave − During a drag operation, ondragleave happens when the mouse moves away from an element before a legitimate drop target.

  • ondragover − It outlines the location where the dragged data may be dropped.

  • ondrop − It describes the location of the drop when the drag operation is complete.

  • ondragend − When the user has done dragging an element, it is said to be ondragend.

Let’s dive into the following examples to get more idea on how to use drag and drop in HTML5.

Example - (drag and drop between two boxes)

In the following example we are creating ae drag and drop image between two boxes.

<!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function dragStart(ev) { ev.dataTransfer.setData("text", ev.target.id); } function dragDrop(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; } </style> </head> <body> <p>Image Drag and Drop in boxes</p> <div class="div1" ondrop="dragDrop(event)" ondragover="allowDrop(event)"> <img id="drag1" src= "https://www.tutorialspoint.com/coffeescript/images/coffeescript-mini-logo.jpg" draggable="true" ondragstart="dragStart(event)" width="220" height="70"> </div> <br> <div class="div1" ondrop="dragDrop(event)" ondragover="allowDrop(event)"> </div> </body> </html>

On executing the above script, it will generate the output displaying two boxes along with an image in the first box. When the users drag the image, the drag event gets triggered and when the users drop the image in the second box, the drop event gets completed.

Data transfer using drag and drop

When the entire Drag and Drop process takes place, the data transfer property is utilised. It is used to keep the data that is being pulled from the source and dump it where it is needed.

Example

Considering the following example we illustrates the use of the draggable property of the element.

<!DOCTYPE HTML> <html> <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; } </style> </head> <body> <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>

When the script gets executed, it will display three boxes when the user starts to drag and drop. After the completion of the event, the data transfer is utilized. It makes sense to pull data from one box and dump it in the required box.

Updated on: 12-Oct-2022

406 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements