Wednesday , January 17 2018
Home / Web Technologies / HTML5 / Lesson 4:HTML5 DRAG and DROP Example

Lesson 4:HTML5 DRAG and DROP Example

HTML5 DRAG and DROP:

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
draggable.
Browser Support
Internet Explorer 9, Firefox, Opera 12, Chrome, and Safari 5 support drag and
drop.
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:

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:

event.preventDefault()

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”, ev.target.id); 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

comments

About Murali

Hello everyone I am Software Developer having 3+ years of Experience in Microsoft Technologies and Others. My skills :- Asp.net, C#,Ado.net, 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-5a5f130639f4e590273265/]   Related Give us your valuable feedback comments

%d bloggers like this: