Saturday, September 3, 2016

Drag and Drop example in HTML5

HTML5 has made dragging and dropping objects from one place to another very easy.

We will see an example of the HTML5 API’s that can be used to drag and drop objects
  1. How to make the object draggable
    • For making object draggable, we need to first set the draggable attribute of that object to true.
    • Then use the onDragStart method to capture the data that needs to be dragged
  2. How to make the object Droppable
    • We use 3 methods that will be used to define a object is droppable
      • onDrop
      • onDragEnter
      • onDragOver

Please see the sample code

Output



Author -

I am Ketan and have a blog KSCodes that is developed to share some of the common examples that we come across in web development. You can get examples on java tutorials and spring tutorials.