HTML5 Drag and Drop

Using Drop Drop, we can move any elememt by clicking on it with the mouse and dragging it anywhere within the viewport.

Drag and Drop HTML elements have two roles:

1. Draggable

Draggable element is the element which can be drag around the HTML page and drop anywhere.
We can enable draggable functionality on any DOM element.

2. Drop target

The drop target is the element onto which the draggable elements are dropped.
We can enable any DOM element to be droppable, a target for draggable elements.

 

How to make an Element Draggable

To make an element draggable, we need to set the draggable attribute to true.

<span draggable=”true” id=”one”>Element One</span>

 

How to Drag – ondragstart

Now we attach event listeners on the draggable element for the dragstart and dragend events.

Dragstart
– This event fires when the user start the dragging of the element.

Dragend
– This event fires when the user release the mouse button while dragging an element.

Dragover
– This event fires when mouse is moved over an element when a drag is occuring.

  <span draggable=”true” ondragstart=”dragStart(event)”>Element One</span>

 

The DataTransfer object

The DataTransfer object holds the data of drag and drop operation.

This data can be retrieved and set the various attributes associated with DataTransfer object.

The dataTransfer.setData() method sets the data type and the value of the dragged element data.

The dragStart() function calls event.dataTransfer.setData() to set the data that is transfered to the drop target when the element is dropped.

function dragStart(ev) {
    ev.dataTransfer.effectAllowed = 'move';
    ev.dataTransfer.setData("Text", ev.target.id);
    return true;
}

Where Drop the element – ondragover

The ondragover event call where the dragged element data can be dropped.

dragover
– This event fired the mouse is moved over an element when a drag is occuring. This operation occurs during a listener will be the same as the dragenter event.

By default, data or elements cannot be dropped in other elements.
To allow a drop, we need to prevent the default handling of the element.

For this, we need to use event.preventDefault() method for the ondragover event.

 

Drop the element- ondrop

When the dragged element is dropped, a drop event occurs.

drop
– This event fires on the element where the drop was occured at the    end of the drag operation. A listener is responsible for retrieving the  data being dragged and inserting it at the drop location.

dragenter
– This event fires when the mouse is first moved over the target  element. If there are no listeners then a drop of element is not  allowed by default.

<div id=”container” ondragenter=”return dragStart(event)”
ondrop=”return dragDrop(event)”
ondragover=”return dragOver(event)”>Container</div>

function dragOver(ev) {
    return false;
}
 
 function dragDrop(ev) {
    var id = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(id));
    ev.stopPropagation();
    return false;
 }

The dragOver() and drop() event handlers call event.preventDefault() and return false.
This is important to make the drag and drop work properly.

You can see DEMO HERE

 

 

 

2 thoughts on “HTML5 Drag and Drop

Comments are closed.