---

Search posts under HTML5:

---

HTML5 > Drag and Drop

In this section we shall learn about the Drag and Drop features in HTML5. Drag and Drop features have been introducted in HTML 5, earlier version of HTML didn't had this feature out of the box.

In order to enable drag and drop HTML element, they must have draggable attribute set to true, like following.

Making the element draggable

<img id="img1" src="../images/bittergourd.jpg" draggable="true" alt="" ondragstart="DragMe(this, event)" />

Apart from draggable attribute, they should also have ondragstart event set to the JavaScript function like in above code snippet.

Creating droppable zone

In order to make the element droppable where we can drop the element being dragged, we need to set it's following event

• ondrop - executes when the element is dropped inside this element
• ondrageneter - executes when the element being dragged enters into this element area
• ondragleave - executes when the element being dragged enters leaves this element area
• ondragover - executes when the element being dragged are over this element area

See how above events are set.

  <div id="div1" style="border:4px dashed #c0c0c0;height:200px;width:400px;padding:10px;margin:30px;"
         ondrop="DropElement(this, event)" 
         ondragenter="HighlightArea(this.id, true)"
         ondragleave="HighlightArea(this.id, false)"
         ondragover="return false">
    </div>

Let's see all above attributes and events in action in following posts

Read posts under HTML5 > Drag and Drop

1. Drag and Drop elements