Warning: Attempt to read property "tagName" on null in /home/mrexamples/public_html/wp-content/themes/awaken/functions.php on line 1055

Warning: Attempt to read property "nodeValue" on null in /home/mrexamples/public_html/wp-content/themes/awaken/functions.php on line 1059

HTML Drag and Drop API

Today the topic of our discussion is HTML draganddrop .In this article, you will learn how to drag and drop any HTML element.

Example

mrexamples

Please place the mrexamples image inside the rectangle by dragging it.

Table Of Content-

Drag and Drop:

Using your mouse to drag and drop items is a frequent practice with HTML draganddrop. It’s “grabbing” an object and repositioning it somewhere.

Drag Events:

The drag-and-drop capability in HTML is based on DOM event models, with drag events originating from mouse events. The drag process generally involves selecting a draggable element, dragging it to a droppable element, and then dropping it when it comes to HTML draganddrop.

There are a variety of events that take place during drag operations, including dragover and drag events, which may happen multiple times.

There is a related event handler for every kind of drag event:

EventExecute During
dragstartWhen a user begins dragging an element or object.
dragA dragged item ( image or text selection ) is moved.
dragleveThe item being dragged leaves a valid drop target.
dragendWhen you release a mouse button or hit Esc, a drag operation ends.
dragoverAbout every 0.1 seconds, an item is being dragged over a valid drop target.
dropWhen an object is dropped on a valid drop target.
dragenterDraggable items enter valid drop targets.

IMPORTANT: Dragging a document from the operating system to the browser does not trigger dragstart or dragend events when it comes to HTML draganddrop.

Browser Compatibility:

The table’s numbers denote the first browser version to include complete Drag and Drop compatibility as it comes to HTML draganddrop.

API
Drag and Drop4.09.03.56.012.0

HTML Drag and Drop Example:

A basic drag-and-drop scenario is shown below:

Example

<!DOCTYPE HTML> <html> <head> <style> #firstDiv{ width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; margin: 10px 0; } </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="firstDiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag-image-1" src="https://mrexamples.com/wp-content/uploads/html_images/img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html>
Tip : It is advisable to break down drag and drop events into their component elements because it’s easier.

Create a Draggable Element:

To begin with, in HTML draganddrop, the draggable attribute must be valid for an element to be dragged and dropped.

<img draggable=”true”>

ondragstart and setData() – What to Drag?

Then, declare the expected behavior of the dragged element.

The ondragstart attribute in the above code sample calls a drag(event) method, passing in the event and the data to be dragged.

You can change the type and value of the dragged data with the dataTransfer.setData() method as it comes to HTML draganddrop.
function drag(ev) { ev.dataTransfer.setData(“text”, ev.target.id); }
In HTML draganddrop, the id of the dragged element (“drag1”) is the value & the data type is “text.”

Ondragover – Where to Drop?

Data can be dropped at a predetermined location by triggering the ondragover event.

It is impossible to drop data or elements into other elements by default. To permit a drop, we must disable the element’s standard processing.

To do this, we use the ondragover event’s event.preventDefault() method in HTML draganddrop:

event.preventDefault()

Do the Drop – ondrop

A drop event occurs when the data that was being dragged is released.

The drop(event) method is invoked in the preceding example via the ondrop attribute when it comes to HTML draganddrop :

function drop(ev) {ev.preventDefault();
var data = ev.dataTransfer.getData(“text”);
ev.target.appendChild(document.getElementById(data));
}

Detailed Explanation of the Code:

  1. To stop the browser from processing the data in its default manner, you can use the preventDefault() function (default is open as the link on the drop).
  2. The dataTransfer.getData() method can retrieve the dragged information. Any information of the same kind that is sent to setData() will be returned.
  3. The element id is what was dragged. Thus that’s what you’ll find in the data (“drag1”).
  4. Combining the element you dragged into the one you dropped.

Example: 

<!DOCTYPE HTML> <html><body><br><br><br><style><br>#firstDiv, #secondDiv {<br>float: left;<br>width: 100px;<br>height: 35px;<br>margin: 10px;<br>padding: 10px;<br>border: 1px solid black;<br>}<br></style><br><script><br>function allowDrop(ev) {<br>ev.preventDefault();<br>}function drag(ev) {<br>ev.dataTransfer.setData("text", ev.target.id);<br>}function drop(ev) {<br>ev.preventDefault();<br>var data = ev.dataTransfer.getData("text");<br>ev.target.appendChild(document.getElementById(data));<br>}<br></script><br><br><h2>Drag and Drop</h2><br><p>Drag the image back and forth between the two div elements.</p><div id="firstDiv" ondrop="drop(event)" ondragover="allowDrop(event)"><br><img src="https://mrexamples.com/wp-content/uploads/html_images/img_logo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="85" height="28"><br></div><div id="secondDiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br> </body></html>

HTML Dragging Text

In this Drag and drop example, we demonstrate dragging text in a rectangular box:

Example: 

<!DOCTYPE HTML> <html> <head> <title>Text Dragging</title> <style> .dropbox { width: 200px; height: 60px; padding: 20px; border: 2px solid #6f0722; } </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> <h3>Drag the text in the rectangle</h3> <div class="dropbox" ondrop="droppoint(event)" ondragover="allowDropOption(event)"> </div> <p id="dragging" draggable="true" ondragstart="dragpoint(event)"> MR EXAMPLES: All you need to know. </p> </body> </html>

HTML Draggable

The example below illustrates the draggable property usage there are three boxes in the example and all of them are draggable:

Example: 

<!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> #boxes { margin: auto; width: 60%; height: 250px; border: 2px solid rgb(50, 7, 7); padding: 8px; } #b1, #b2, #b3 { float: left; margin: 5px; padding: 6px; } #b1 { width: 80px; height: 80px; background-color: #99eedd; } #b2 { width: 120px; height: 120px; background-color: #f9c639; } #b3 { width: 200px; height: 200px; background-color: #45db1c; } p { font-size: 20px; font-weight: bold; text-align: center; } .mr { font-size: 40px; color: #480f0f; font-weight: bold; text-align: center; } </style> </head> <body> <div class="mr">MR EXAMPLES</div> <p>Boxes can be dragged and dropped</p> <div id="boxes"> <div id="b1" draggable="true" ondragstart="dragStart(event)"> </div> <div id="b2" draggable="true" ondragstart="dragStart(event)"> </div> <div id="b3" ondrop="dragDrop(event)" ondragover="allowDrop(event)"> </div> </div> </body> </html>

Use of HTML drag and drop

HTML drag and drop is a feature that allows users to drag an object and drop it to a different location on a web page. This feature has several useful applications:

  • File Upload: Drag and drop can be used to upload files to a website. Users can simply drag a file from their computer and drop it onto the website, without having to navigate through folders or click on a button to select a file.
  • Sorting and Reordering: Drag and drop can be used to sort and reorder elements on a web page. For example, users can drag and drop items in a shopping cart to change their order, or drag and drop items in a to-do list to prioritize them.
  • Interactive Games: Drag and drop can be used to create interactive games and puzzles on a web page. Users can drag and drop objects to solve puzzles, build structures, or complete challenges.
  • Workflow Automation: Drag and drop can be used to automate workflows and simplify complex tasks. Users can drag and drop files, folders, or other elements to trigger automated processes, such as file conversions or data analysis.

If this article somehow helped you to fulfill your educational desires, do share this meaningful information with your friends by clicking on the links below.
We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon
By subscribing, you agree with our privacy policy and our terms of service.

Leave a Reply

Your email address will not be published. Required fields are marked *