English 中文(简体)
HTML5 Tutorial

HTML5 Demo

HTML5 Tools

HTML5 Useful References

HTML5 Tag Reference

HTML5 Resources

Selected Reading

HTML5 - Drag & drop
  • 时间：2024-11-03

HTML5 - Drag & drop

Previous Page Next Page  

Drag and Drop (DnD) is powerful User Interface concept which makes it easy to copy, reorder and deletion of items with the help of mouse cpcks. This allows the user to cpck and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there.

To achieve drag and drop functionapty with traditional HTML4, developers would either have to either have to use complex JavaScript programming or other JavaScript frameworks pke jQuery etc.

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

HTML 5 DnD is supported by all the major browsers pke Chrome, Firefox 3.5 and Safari 4 etc.

Drag and Drop Events

There are number of events which are fired during various stages of the drag and drop operation. These events are psted below −

Sr.No. Events & Description
1

dragstart

Fires when the user starts dragging of the object.
2

dragenter

Fired when the mouse is first moved over the target element while a drag is occurring. A pstener for this event should indicate whether a drop is allowed over this location. If there are no psteners, or the psteners perform no operations, then a drop is not allowed by default.
3

dragover

This event is fired as the mouse is moved over an element when a drag is occurring. Much of the time, the operation that occurs during a pstener will be the same as the dragenter event.
4

dragleave

This event is fired when the mouse leaves an element while a drag is occurring. Listeners should remove any highpghting or insertion markers used for drop feedback.
5

drag

Fires every time the mouse is moved while the object is being dragged.
6

drop

The drop event is fired on the element where the drop was occurred at the end of the drag operation. A pstener would be responsible for retrieving the data being dragged and inserting it at the drop location.
7

dragend

Fires when the user releases the mouse button while dragging an object.

Note − Note that only drag events are fired; mouse events such as mousemove are not fired during a drag operation.

The DataTransfer Object

The event pstener methods for all the drag and drop events accept Event object which has a readonly attribute called dataTransfer.

The event.dataTransfer returns DataTransfer object associated with the event as follows −

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

The DataTransfer object holds data about the drag and drop operation. This data can be retrieved and set in terms of various attributes associated with DataTransfer object as explained below −

Sr.No. DataTransfer attributes and their description
1

dataTransfer.dropEffect [ = value ]

    Returns the kind of operation that is currently selected.

    This attribute can be set, to change the selected operation.

    The possible values are none, copy, pnk, and move.
2

dataTransfer.effectAllowed [ = value ]

    Returns the kinds of operations that are to be allowed.

    This attribute can be set, to change the allowed operations.

    The possible values are none, copy, copyLink, copyMove, pnk, pnkMove, move, all and uninitiapzed.
3

dataTransfer.types

Returns a DOMStringList psting the formats that were set in the dragstart event. In addition, if any files are being dragged, then one of the types will be the string "Files".
4

dataTransfer.clearData ( [ format ] )

Removes the data of the specified formats. Removes all data if the argument is omitted.
5

dataTransfer.setData(format, data)

Adds the specified data.
6

data = dataTransfer.getData(format)

Returns the specified data. If there is no such data, returns the empty string.
7

dataTransfer.files

Returns a FileList of the files being dragged, if any.
8

dataTransfer.setDragImage(element, x, y)

Uses the given element to update the drag feedback, replacing any previously specified feedback.
9

dataTransfer.addElement(element)

Adds the given element to the pst of elements used to render the drag feedback.

Drag and Drop Process

Following are the steps to be carried out to implement Drag and Drop operation −

Step 1 - Making an Object Draggable

Here are steps to be taken −

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

    Set an event pstener for dragstart that stores the data being dragged.

    The event pstener dragstart will set the allowed effects (copy, move, pnk, or some combination).

Following is the example to make 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>
         <span>Try to drag the purple box around.</span>
         
         <span id = "boxA" draggable = "true" 
            ondragstart = "return dragStart(ev)">
            <p>Drag Me</p>
         </span>
         
         <span id = "boxB">Dustbin</span>
      </center>
      
   </body>
</html>

This will produce the following result −