HTML5 -- Drag and Drop (drag & amp; Drop), html5 -- Drag and Drop drag

HTML5 -- Drag and Drop (drag & Drop), html5 -- Drag and Drop drag

In HTML5, drag-and-drop is a standard part, that is, drag an object to another position (add a defined parent element) after it is captured, and drag and drop any element.

Browser support

Internet Explorer 9, Firefox, Opera 12, Chrome, and Safari 5 support drag and drop.

* Note: Drag and Drop is not supported in Safari 5.1.2.

1. Set the element to drag and drop

Drag the element to set the draggable attribute to true.

Eg:

<P id = "txt" draggable = "true"> drag text </p>

2. What to drag-ondragstart and setData ()

Then, specify what will happen when the element is dragged.

The ondragstart attribute calls a function, drag (Event), Which specifies the data to be dragged.

<P id = "txt" draggable = "true" ondragstart = "drag (event)"> drag and drop text </p>

The dataTransfer. setData () method sets the data type and value of the dragged data.

1 function drag(e1){2     e1.dataTransfer.setData('text',e1.target.id);3 }

* The data type is "Text", and the value is the id of the drag element ("drag1 ").

3. 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. To allow placement, We must block the default Processing Method for elements.

You must call the ondragover eventEvent. PreventDefault () method.

4. Place-ondrop

A drop event occurs when data is dragged.

Ondrop property calls a function, drop (Event).

Html:

<div id="box" style="height: 200px; border:2px solid deeppink;" ondrop="drop(event)" ondragover="allow(event)"></div>

Js:

1 function allow(e){2     e.preventDefault();3 }4 function drop(e){5     var tag=e.dataTransfer.getData('text');                    document.getElementById('box').appendChild(document.getElementById(tag))6 }

View CodeHTML5 drag-and-drop example

1 <! DOCTYPE html> 2 View Code explanation:

 

 
  
PreventDefault () is called to prevent the browser from processing data by default (the default action of the drop event is to open in the form of a link)
 
  
Use the dataTransfer. getData ("Text") method to obtain the dragged data. This method returns any data set to the same type in the setData () method.
 
  
Dragged data is the id of the dragged element ("drag1 ")
 
  
Append the dragged element to the placed element (target element ).