Post
Ask Question

Powerful User Interface concept Drag and Drop HTML5 with live Demo

Drag and Drop in HTML 5

(DnD) is a great user interface concept that makes it easy to copy, reorder and delete items with the help of a mouse click. This allows the user to click and hold the mouse button on an item, drag the item to another location, and release the mouse button to drop that item.

To use drag-and-drop functionality with traditional HTML4, developers must use complex JavaScript programming or jQuery, etc. They must use other JavaScript components, such as,

HTML 5 now offers a Drag and Drop (DnD) API that brings native DnD support to browsers for easy customization. HTML 5 DnD is supported by all major browsers (for example, Chrome, Firefox 3) 5 and Safari 4, etc.

Drag and Drop Events

Numerous events are triggered at various stages of the drag-and-drop operation. The events are listed below -

  1. Dragstart- Raised when the user starts dragging objects.
  2. Dragenter- Fires the first time the mouse moves over the target while a dragon is present. Listeners of this event should be informed whether it is allowed to be posted on this site. Destruction is not allowed by default if there is no listener or the listener does nothing.
  3. Drag Over- This event is triggered when the mouse hovers over the item when a drag occurs. In general, what happens during the trial will be similar to dragenter events.
  4. Dragleave- This event is triggered when the mouse leaves the element during the mission. Listeners should remove important content or information used to discard feedback.
  5. Drag- Triggered every time the mouse moves while dragging an object.
  6. Drop- Raises a drop event on the element where the drop occurred at the end of the drag operation. The listener will be responsible for retrieving the data dragged and inserted at the drop point.
  7. Dragend- Raised when the user releases the mouse button while dragging an object.

DataTransfer object

Each drag-and-drop event listener receives an event object with a read-only property named dataTransfer.

event.dataTransfer Returns the DataTransfer object associated with the event, as shown below.

function EnterHandler(event) {
   DataTransfer dt = event.dataTransfer;
   .............
}

The DataTransfer object holds information about the drag-and-drop operation. These data can be retrieved and set as various objects associated with the DataTransfer object, as described below.

dataTransfer.dropEffect [ = value ]
  • Now returns a Function type.
  • This feature can be set to change the function of the selection.
dataTransfer.effectAllowed [= value]
  • Returns the allowed operation type.
  • This feature can be designed to replace authorized functions.
  • Possible values ?? missing, copy, copyLink, copyMove, link, linkMove, move, full, and not initialized.
dataTransfer.types
  • Return to DOMStringList to collect the type specified in the Dragstart event. 
  • Also, if the file is downloaded, one of the types will be the string "File".
dataTransfer.clearData ( [ format ] )
  • Deletes data in the specified format.
  • If the argument is omitted, all records are removed.
dataTransfer.setData(format, data)
  • Add dataset.
data = dataTransfer.getData(format)
  • Returns the specified data.
dataTransfer.addElement(element)
  • Add the specified element to the list of elements used to provide the pull pointer.
  • Drag and drop operation

How do we use drag-and-drop?

Step 1.  Making the item draggable

Here are the steps to do it - If you want to laugh in a season, make an appointment. The draggable character of the season has been firmly established.

Set an event listener for drag initiation to collect dragged files.

The listener drag start event will set the allowed effects (copy, move, link, or combination).

Below is an example of creating a draggable object.

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

Result

Drag and Drop