HTML5 Drag and Drop (Drag and Drop) details and examples, html5drag

HTML5 Drag and Drop (Drag and Drop) details and examples, html5drag
Introduction

Drag and Drop is a common feature, that is, to drag an object to another position after it is captured.

In HTML5, drag and drop is part of the standard, and any element can be dragged and dropped.

Click a small example: execute JavaScript when the user starts to drag the <p> element.

<P draggable = "true" ondragstart = "myFunction (event)"> drag me! </P>

Tip: links and images can be dragged by default, and the draggable attribute is not required.

Definition and usage

The following events are triggered during drag-and-drop:

• Trigger an event on the drag target(Source Element):
  • Ondragstart-triggered when the user starts to drag an element
  • Ondrag-triggered when the element is being dragged
  • Ondragend-triggered after the user completes element dragging

• Events triggered when the target is released:
  • Ondragenter-this event is triggered when an object dragged by the mouse enters its container range.
  • Ondragover-this event is triggered when a dragged object is dragged within the range of another object container
  • Ondragleave-this event is triggered when an object dragged by the mouse leaves its container range.
  • Ondrop-this event is triggered when the mouse key is released during a drag process.

Browser support

Internet Explorer 9 +, Firefox, Opera, Chrome, and Safari support dragging.

Note:Safari 5.1.2 does not support drag. When dragging an element, the ondragover event is triggered every 350 milliseconds.

Instance

Paste the code first and then explain it one by one:

<! DOCTYPE html> 
The page effect before dragging is:

Next we will parse the meaning of the above Code.
Drag and Drop setting Elements
First, set the draggable attribute to true to make the element drag:
Drag-ondragstart and setData ()
Then, specify what will happen when the element is dragged.
In the preceding example, the ondragstart attribute calls 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 ("drag1") of the element that can be dragged ").
Where to put-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 need to call the event. preventDefault () method of the ondragover event:
event.preventDefault()
Place-ondrop
A drop event occurs when data is dragged.
In the above example, the ondrop attribute calls a function, drop (event ):
function drop(ev){    ev.preventDefault();    var data=ev.dataTransfer.getData("Text");    ev.target.appendChild(document.getElementById(data));}
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 ).

 
Implementation result
Firefox drag and drop
However, we found a problem in Firefox:
PreventDefault is used for html5 drag-and-drop to prevent new pages from being popped up, but does it work in Firefox?
Solution:
document.body.ondrop = function (event) {    event.preventDefault();    event.stopPropagation();}