HTML Drag and Drop

❮ PrevNext ❯

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>
Run

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"; }

Reminder

Hi Developers, we almost covered 99.5% of HTML Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in HTML.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Meet the Author