HTML Drag and Drop

Last Updated:

Drag the ball inside any of these box:
football

HTML Drag and Drop

The HTML Drag and Drop is a graphical user interface which makes it easy to move, copy, reorder and deletion of items with the help of mouse clicks (drag and drop).

Example

HTML Online Editor
<!DOCTYPE html> <html> <head> <style> #myIDdiv{ width: 100px; height: 100px; padding: 5px; border: 1px solid #8c8c8c; } </style> </head> <body> <p id="point">Drag the ball inside the Box:</p> <div id="myIDdiv" ondrop="onDrop(event)" ondragover="dropArea(event)"></div> <img id="myIDimg" src="/football.svg" draggable="true" ondragstart="onDrag(event)" width="95" height="95"> <script> function dropArea(ev){ ev.preventDefault(); } function onDrag(ev){ ev.dataTransfer.setData("text", ev.target.id); } function onDrop(ev){ var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); document.getElementById("point").innerHTML = "Good Job... Cheers"; } </script> </body> </html>

Browser Support

Devicedesktopmobile
Browsergoogle chromesafarifirefoxinternet Exploreredgeoperagoogle chromesafarifirefoxedgeoperaandroid webviewsamsung internet
Drag / DropYesYesYesYesYesYesYes?YesYesYesYes?

Closer Look

onDrag function

The following function executes once when the user starts dragging the element.

Here, ev.dataTransfer.setData() method sets the data type and the value of the dragged data.

HTML Online Editor
function onDrag(ev){ ev.dataTransfer.setData("text", ev.target.id); }

dropArea Function

The following function executes whenever the draggable element is moving over the drop area.

By Default, elements cannot be dropped in other elements. To do this, use event.preventDefault() method to prevent the default behavior.

HTML Online Editor
function dropArea(ev) { ev.preventDefault(); }

onDrop function

The following function executes once when the user drops a draggable element into a drop area.

HTML Online Editor
function onDrop(ev) { var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); document.getElementById("myID").innerHTML = "Good Job... Cheers"; }

Share this Page

Meet the Author