Jump to content

  • Free consultations and support
  • Live chatClick Here for Live Chat
  • Call ico 1888-906-1888
    Phone support: Open

    Ready for your call :)

    Our business hours:

    Mon — Fri, 2am — 8pm (EST)

    US & EU support teams

    Phone support: Closed

    We are back in: 1h 20m

    Our business hours:

    Mon — Fri, 2am — 8pm (EST)

    US & EU support teams


HTML5 Drag and Drop

drag and drop html5

  • Please log in to reply
 

#1 DesGuru

DesGuru

    Senior Member

  • Designer
  • 220 posts

Posted 02 November 2012 - 04:58 PM

In HTML5, any element can be dragged and dropped. The browsers that supports HTML5 drag and drop feature are Firefox. IE9, Safari 5, Opera 12 and Chrome.
To make an element draggable:
1.First you need to set the drag attribute as ‘true’ :<img draggable="true">

2.ondragstart and setData() should be used to specify what you want to happen when the element is dragged.
The dataTransfer.setData() method sets the data type and the value of the dragged data:

Ex.
function drag(ev1)
{
ev1.dataTransfer.setData("Text",ev1.target.id);
}
The data type here is "Text" and its value is the id of the draggable element.
The dataTransfer.setData() method sets the data type and the value of the dragged data:
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
In this case, the data type is "Text" and the value is the id of the draggable element ("drag1").

3.Use the ondragover event to specify where to Drop the dragged data
Elements cannot be dropped on other elements by default, but if you want to allow this you have to prevent the default handling by calling the event.preventDefault() method for the ondragover event.
Ex
event.preventDefault()

4.Finally you need to do the drop using ondrop
The ondrop attribute should calls a function, drop(event)
Ex.
function drop(ev1)
{
ev1.preventDefault(); \\ prevent the default browser default handling of the data
var data=ev1.dataTransfer.getData("Text"); \\Get the dragged data ev1.target.appendChild(document.getElementById(data)); \\Append dragged elements
}





Also tagged with one or more of these keywords: drag and drop, html5

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users