HTML5 Drag and drop

Set elements to be dragged and dropped

First, to make an element draggable, set the Draggable property to True:

What to drag-ondragstart and SetData ()

The Datatransfer.setdata () method sets the data type and value of the dragged data:

function drag (EV) {ev.dataTransfer.setData ("Text", ev.target.id);}

In this example, the data type is "Text" and the value is the ID of the draggable element ("Drag1").

Where to put it-ondragover

The OnDragOver event specifies where to place the dragged data.

By default, data/elements cannot be placed in other elements. If you need to set allow placement, we must block the default handling of elements.

This is done by invoking the event for OnDragOver events. Preventdefault () Method:

Event.preventdefault ()

To place-OnDrop

The drop event occurs when the dragged data is dropped.

In the example above, the OnDrop property invokes a function, drop (event):

function Drop (EV) {ev.preventdefault (); var data=ev.datatransfer.getdata ("Text"); Ev.target.appendChild ( document.getElementById (data));}

Code Explanation:

• Call Preventdefault () to avoid browser default handling of data (the default behavior of the drop event is to open as a link)
• The dragged data is obtained by means of the Datatransfer.getdata ("Text") method. The method returns any data that is set to the same type in the SetData () method.
• The dragged data is the ID of the dragged element ("Drag1")
• Appends the dragged element to the placement element (the target element)

HTML5 Drag and drop