HTML5 Drag and drop: What does drag and drop mean separately? How to use it?

Now the HTML5 is so hot, let's meet these new elements, this article will lead you to know what is the HTML5 of the drag and drop elements, and how to use.

What do you mean by drag and drop in HTML5?

Drag-and-drop is a common feature that grabs an object and then drags it to another location. , the purpose of drag and drop is to allow you to place an object where you want it to be placed. In HTML5, drag-and-drop is part of the standard, and any element can be dragged and dropped.

What are the drag and drop points respectively?

Darg: The event body is a drag-and-drop element that is triggered when a drag-and-drop element is being dragged.

drop: The event body is the target element that is triggered when the target element fully accepts a drag-and-drop element.

Browser support

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer + +, Firefox, Opera, Chrome, and Safari support drag.

Note: Safari 5.1.2 does not support dragging.

HTML5 Drag and Drop usage example

The following example is a simple drag-and-drop instance:

Here are some examples:

<! DOCTYPE html> 
It may seem a little complicated, but we can study the different parts of the drag-and-drop event separately.

Drag-and-drop events perform detailed steps:

1. Set the element to be a drag-and-drop

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


What to drag-ondragstart and SetData ()

Then, specify what happens when the element is dragged.

In the example above, the Ondragstart property invokes a function, drag (event), which specifies the data to be dragged.

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").

Tip: You can learn more useful information in the "Ondragstart Events" section of this website!

2. Where to place-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 calling the Event.preventdefault () method of the OnDragOver event:

Event.preventdefault ()

3. Placing-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"), and the dragged element is appended to the placement element (the target element).

"Recommended"

HTML base element that gives you 0 basic learning HTML

The development history of HTML and HTML5