Monday , December 10 2018
Home / Web Technologies / HTML5 / Lesson 4:HTML5 DRAG and DROP Example

Lesson 4:HTML5 DRAG and DROP Example


Drag and drop is a very common feature. It is when you “grab” an object and
drag it to a different location.
In HTML5, drag and drop is part of the standard, and any element can be
Browser Support
Internet Explorer 9, Firefox, Opera 12, Chrome, and Safari 5 support drag and
Note: Drag and drop does not work in Safari 5.1.2.
HTML5 Drag and Drop Example
The example below is a simple drag and drop example:


Where to Drop – ondragover

The ondragover event specifies where the dragged data can be dropped.By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element. This is done by calling the event.preventDefault() method for the ondragover event:


Do the Drop – ondrop

When the dragged data is dropped, a drop event occurs.In the example above, the ondrop attribute calls a function, drop(event):


Code explanation:

  • Call preventDefault() to prevent the browser default handling of the data
  • (default is open as link on drop)
  • Get the dragged data with the ev.dataTransfer.setData(“x”,; method.
  • This method will return any data that was set to the same type in the
  • setData() method
  • Append the dragged element into the drop element


Downlaod Full Code Here DragDrop

Print Friendly, PDF & Email

Give us your valuable feedback


About Murali

Hello everyone I am Software Developer having 3+ years of Experience in Microsoft Technologies and Others. My skills :-, C#,, SQL SERVER, web services, windows Service,Windows applications,HTML,CSS, JavaScript,JQuery,AnjularJs

Check Also

Lesson 14:HTML5 New Form Input Types Example-2

HTML5 New Form Inputs Example: [crayon-5c0e0e475c327340138174/]   Give us your valuable feedback comments