Enroll Course

100% Online Study
Web & Video Lectures
Earn Diploma Certificate
Access to Job Openings
Access to CV Builder


Chapters


HTML5 - Introduction

HTML5 - Syntax
HTML5 - Attributes
HTML5 - Events
HTML5 - Web Forms 2.0
HTML5 - MathML
HTML5 - Web Storage
HTML5 - Web SQL Database
HTML5 - Server Sent Events
HTML5 - WebSockets
HTML5 - Canvas
HTML5 - Audio & Video
HTML5 - Geolocation
HTML5 - Microdata
HTML5 - Drag & Drop
HTML5 - Web Workers
HTML5 - IndexedDB
HTML5 - Web Messaging
HTML5 - CORS
HTML5 - Web RTC


Outlines


What Is Drag & Drop In HTML5

Drag And Drop Events
Drag And Drop Process
Step 2 - Dropping The Object 

ENROLL NOW










Online Certification Courses

HTML5 - Drag & Drop

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>
< Previous Page Next Page >
[ CHOOSE COURSE ]
ENROLL NOW

SIIT is on a mission to make technology education and professional training more accessible, so more people can show off their talents and take their tech careers to the next level. All courses are tailored to meet individual specific career needs, leading to Tech Skills Acquisition and Professional Certification.

Corporate Training for Business Growth and School