Online Certificate Courses HTML5 Course. HTML5 Certification, HTML5 Training, HTML5 Tutorials. 

What is Drag & Drop in HTML5

HTML5 introduced the Drag and Drop feature which is a very powerful user interface mechanism. It allows the user to copy, reorder and delete items just by mouse clicking. This particular feature lets the user click and hold down the mouse button over a particular HTML element, also drag it to another location and even release the mouse button to drop the element at that location.

In other to carry out the drag and drop functionality with just the old HTML4, web developers would be required to make use of complex Javascript or even other Javascript frameworks like jQuery, etc.

Now that HTML 5 was shipped with a Drag and Drop (DnD) API that brings native DnD support to the browser making it much easier to code up.

Now that HTML5 was shipped with a Drag and Drop (DnD) API that offers native DnD support to the browser thereby making it quite easier to write the code for it.

The major browsers like Chrome, Firefox 3.5 and Safari 4, etc has support for HTML 5 DnD.

Drag and Drop Events

There are quite a number of events that are triggered during various phases when drag and drop are attempted. These events are listed below:

1. Dragstart

2. dragenter

3. dragover

4. dragleave

5. drag

6. drop

7. dragend

Note: Only drag events are fired. mouse events like mousemove are not triggered during a drag process. 

Drag and Drop Process

The following are the various steps that are to be carried out when implementing a Drag and Drop feature

Step 1 - Making an Object Draggable 

  1. If you want to drag an element, you need to set the draggable attribute to true for that element.

  2. You have to set an event listener for dragstart that stores the data being dragged.

  3. The event listener dragstart will set the allowed effects (copy, move, link, or some combination).

The code below is for making an object draggable.

<!DOCTYPE HTML>

<html>
   <head>
      
      <style type = "text/css">
         
         #boxA, #boxB {
            float:left;padding:10px;margin:10px; -moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      
      <script type = "text/javascript">
         
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed = 'move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            
            return true;
         }
      </script>
      
   </head>
   <body>
      
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to drag the purple box around.</div>
         
         <div id = "boxA" draggable = "true" 
            ondragstart = "return dragStart(ev)">
            <p>Drag Me</p>
         </div>
         
         <div id = "boxB">Dustbin</div>
      </center>
      
   </body>
</html>

Step 2 - Dropping the Object 

To accept a drop, the drop target has to listen to at least three events.

  • The dragenter event, which is used to determine whether or not the drop target is to accept the drop. If the drop is to be accepted, then this event has to be canceled.

  • The dragover event, which is used to determine what feedback is to be shown to the user. If the event is canceled, then the feedback (typically the cursor) is updated based on the dropEffect attribute's value.

  • Finally, the drop event, which allows the actual drop to be performed.

Following is the example to drop an object into another object −

<html>
   <head>
      <style type="text/css">
         #boxA, #boxB {
            float:left;padding:10px;margin:10px;-moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      <script type="text/javascript">
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed='move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            return true;
         }
         function dragEnter(ev) {
            event.preventDefault();
            return true;
         }
         function dragOver(ev) {
            return false;
         }
         function dragDrop(ev) {
            var src = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(src));
            ev.stopPropagation();
            return false;
         }
      </script>
   </head>
   <body>
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to move the purple box into the pink box.</div>
         <div id="boxA" draggable="true" ondragstart="return dragStart(event)">
            <p>Drag Me</p>
         </div>
         <div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Dustbin</div>
      </center>
   </body>
</html>

90% Scholarship Offer!!

The Scholarship offer is a discount program to take our Course Programs and Certification valued at $70 USD for a reduced fee of $7 USD. - Offer Closes Soon!!

Copyrights © 2021. SIIT - Scholars International Institute of Technology is a subsidiary of Scholars Global Tech. All Rights Reserved.