There can be situation while developing a web-application, where you might want to use drag and drop functionality using javascript, to sort a list or may be to change the position of some elements, so in that case you can simply create this functionality using Javascript.

Before we explore how to create drag and drop functionality using Javascript and HTML 5, you should understand about events which we will be using:

  1. ondragstart :  Fired, when the user starts dragging of the object.
  2. ondragover: 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 listener will be the same as the dragenter event.
  3. ondragenter: Fired, when the mouse is first moved over the target element while a drag is occurring. A listener for this event should indicate whether a drop is allowed over this location. If there are no listeners, or the listeners perform no operations, then a drop is not allowed by default.
  4. ondragleave: Fired, when the mouse leaves an element before a valid drop target while the drag is ocurring.
  5. ondrop: it specifies where the drop was occurred at the end of the drag operation.
  6. ondragend: Occurs when the user has finished dragging an element.

The above event ares useful to understand to create drag and drop functionality.

Creating HTML 5 Dragable elements

Create an HTML file for your drag and drop function. For this you must be using HTML 5, html file.

Now, as your page will contain elements that can be dragged and elements in which the dragged items can be dropped.

Start with the areas your user will be able to drop draggable elements into, you can do that by adding the following <div> section as shown below

<body>

<div class="pics">

<div id="area1" ondrop="dropIt(event);" ondragover="event.preventDefault();">

</div>
<div id="area2" ondrop="dropIt(event);" ondragover="event.preventDefault();">

</div>
<div id="area3" ondrop="dropIt(event);" ondragover="event.preventDefault();">

</div>

</div>

</body>

The draggable image in the page will be able to drop within these elements which has an ID to identify it within the JavaScript code.

The “ondrop” event specifies a function that will execute when an item is dropped over one of these elements.

The “ondragover” event simply instructs the browser not to do what it does by default, which is to prevent items being dropped within other elements, we are telling the browser to allow elements to be dropped by preventing this default behavior.

Adding Draggable element in the page

<img id="drag1" src="http://iconbug.com/data/29/128/1cc6b61217921b624db0cd6cfd6d1360.png" draggable="true" ondragstart="dragIt(event);" style />


The draggable attribute instructs the browser to allow users to drag the image element.

The “ondragstart” event attribute specifies a JavaScript function to execute when dragging commences.

Add this inside the placeholder element.

Now, let's add some CSS in your page

div[id^="area"]
{float:left;
width:150px;
height:150px; 
margin:3px;
padding:3px; 
border:1px dotted #333333;
background-color:#fefefe;
}

We will also add some more HTML/CSS to give numbers to above created div's

<div class="nums">
<span>1</span>
<span>2</span>
<span>3</span>
</div>

CSS

span
{float:left; width:150px; margin:3px; padding:3px; border:1px solid #999999; color:#333333;}
.pics, .nums
{clear:both; text-align:center;}

Now, we will add implement dragging using Javascript code

We will be using dataTansfer.setData object, which Sets the data to be dragged.

The data transfer property is used when the whole process of Drag and Drop happens. It is used to hold the dragged data from the source and drop it to the desired location.

//function called when drag starts
function dragIt(theEvent) {
 //tell the browser what to drag
 theEvent.dataTransfer.setData("Text", theEvent.target.id);
}

If you look at your image element inside div, you will see that this is the function specified within the “ondragstart” event attribute.

The content of the function specifies the image element, letting the browser know that is what to drag.

The function receives an event variable providing access to data about the element being dragged.

Now, we will implement dropping the object using Javascript

So, here is the Javascript function for it.

//function called when element drops
function dropIt(theEvent) {
//get a reference to the element being dragged
var theData = theEvent.dataTransfer.getData("Text");
//get the element
var theDraggedElement = document.getElementById(theData);
//add it to the drop element
theEvent.target.appendChild(theDraggedElement);
//instruct the browser to allow the drop
theEvent.preventDefault();
}

In the above code, we will be using dataTransfer.getData, which returns the data of the specified format. If there is no such data, returns the empty string. This code first gets a reference to the dragged element, then adds it to the element it is being dropped in.

Again, the code tells the browser not to implement the default behavior so that the image can be dropped successfully. This function also receives the event data indicating information about the dragged element and the element being dropped over.

Output

javascript-drag-and-drop-functionality-html5-min.gif

So, we are done, here is the Complete HTML/CSS and Javascript Fiddle demo