HTML5 drag and drop

HTML5 Drag and drop

Drag and drop

Drag and drop is a common feature, that is, grabbing an object and dragging it to another location.

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

Related examples:

    
  

垃
圾
箱
 
 
列表1
 
列表2
 
列表3
 
列表4
 
列表5
 
列表6
 
 
    

Set elements to be draggable

First, in order to make the element draggable, set the draggable attribute to true:

What to drag - ondragstart and setData()

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

In the above example, the ondragstart attribute calls a function, drag(event), which specifies the data to be dragged.

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 place - ondragover

ondragover event specifies where to place the dragged data.

By default, data/elements cannot be placed into other elements. If we need to allow placement, we must prevent the default handling of the element.

This is done by calling the event.preventDefault() method of the ondragover event:

event.preventDefault()

placed - ondrop

When the dragged data is placed, the drop event will occur.

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:

Call preventDefault() to prevent the browser from modifying the data The default processing (the default behavior of the drop event is to open as a link)

Get the dragged data through the dataTransfer.getData("Text") method. This method will return any data set to the same type in the setData() method.

The dragged data is the id of the dragged element ("drag1")

Append the dragged element to the placed element (target element)

Summary of relevant knowledge points:

DataTransfer object: The medium used to transfer the drop object, usually Event.dataTransfer.

draggable attribute: The label element must be set with draggable=true, otherwise it will have no effect, for example:

ondragstart event: an event triggered when the dragged element starts to be dragged. This event acts on the dragged element

ondragenter event: when the dragged element enters the target element The event is triggered when the drag element is moved on the target element. This event acts on the target element.

ondragover event: The event is triggered when the drag element moves on the target element. This event acts on the target element.

ondrop Event: An event triggered when the dragged element is on the target element and the mouse is released. This event acts on the target element.

ondragend Event: An event triggered when the drag is completed. This event acts on the dragged element.

Event.preventDefault() method on the element: prevents the execution of some default event methods. PreventDefault() must be executed in ondragover, otherwise the ondrop event will not be triggered. In addition, if you drag something from other applications or files, especially pictures, the default action is to display the picture or related information, and does not actually execute drop. At this time, you need to use the document's ondragover event to kill it directly.

Event.effectAllowed property: It is the effect of dragging.