Drag and drop – overview

Posted on by

The HTML5 – HTML series latest version comes with a drag and drops API. This feature allows the user to drag and drop the data within the website or with other websites.

This drag and drop feature allows the user to click and hold an element using the button in the mouse drag that element and drop into another location. That location may be the same site or another site. When the element is dragged from a location a translucent image follows the path that the mouse moves during this dragging operation.

 

Drag and drop basics

When a drag operation is initiated by the user number of information may be provided. They are listed below. The element that is going to be dragged the date may be in different formats (eg) A text can be dragged across sites. The translucent image that has to follow the drag operation on the mouse movement. This translucent image can be changed and customized based on the requirements. The drag effects that are possible here are

  • A copy image to indicate that the dragged element will be moved to the new location.
  • A move to the translucent image to indicate that the data that is being dragged will be moved
  • A linked image to indicate the relationship or connection that has to be created between the source and the end terminals

During the drag operation, the drag operation these above said 3 effects are modifiable.

 

Drag events

 

During this drag and drop process, a number of stages occur to successfully accomplish the drag and drop operation.  The data transfer property in the drag events will hold information about the drag and drop operation.

 

Dragstart

 

This stage is fired on the element on which the drag operation is invoked. During this stage, the listener will set information such as drag data and image to the element that is going to be dragged.

 

Dragenter

 

This stage is fired over the element that when the mouse over occurs over the element that is being dragged. The listener for this indicates will indicate the user if the drag element can be dropped over a location or not. If there is no indication of listeners then by default drop is not allowed.

 

Dragover

 

This event occurs when the user moves the mouse over the drag element when the drag operation still continues.

 

Dragleave

 

This event occurs when the mouse leaves the element simultaneously when the drag occurs.

 

Drag

 

This event is fired at the source of the drag.

 

Drop

 

This event occurs in the element where the drop actually occurred at the end of the drag operation. The listener takes care of retrieving the data that is dragged and placing them in the drop location