Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to use the DragEvent interface in HTML5. It is very detailed and has a certain reference value. Friends who are interested must finish it!

DragEvent is a DOM event interface that represents the interaction between drag and drop. The user starts dragging by placing a pointer device (such as a mouse) over the surface of the target, and then dragging the pointer to a new location (such as other DOM elements). The application automatically parses drag-and-drop interactions. The DragEvent interface inherits properties from mouseEvent and Event.

Event types

DragEvent is not a single event, it contains multiple events, these events are: drag,dragstart,dragenter,dragend,dragover,dragexit,dragleave,drop.

Drag: this event is triggered repeatedly during element dragging, every hundred milliseconds. The target element of this event is the one that was dragged, which can bubble and cancel the default behavior.

Dragstart: this event is triggered when the user starts dragging. The target element of this event is the one that was dragged, of which the dragstart event is the first to fire. This event can bubble and cancel the default behavior.

Dragenter: this event triggers when the dragged element enters a legitimate drop target. The target element of this event is the drop target. This event can bubble and cancel the default behavior.

Dragover: this event is triggered repeatedly when the dragged element moves within the range of the drop target, once in a hundred milliseconds. The target element of this event is the drop target. This event can bubble and cancel the default behavior.

Dragend: this event is triggered when the drag ends, and the target element of this event is the dragged element. In these events, the dragend is finally triggered. This event can bubble and cannot cancel the default behavior.

Dragleave: this event is triggered when an element is dragged away from a legitimate drop target. The target element of this event is the drop target. This event can bubble and cannot cancel the default behavior.

Dragexit: this event is triggered when a drop element is no longer the nearest drop target for a drag operation. The target element of this event is the drop element. This event can bubble and cancel the default behavior.

Drop: this event is triggered when the pointer device of the draggable element is released on the drop target, and the target element of the event is the drop target. The drop event is triggered before the dragend event is triggered. This event can bubble and cancel the default behavior.

Test target # drag {width:200px; height:200px; background-color: aqua;} .drop {width: 300px; height: 300px; background-color: antiquewhite;} This text may be dragged.

If the draggable attribute is disabled or set to false, then this element cannot be dragged. The draggable property can be set on any property. When an element is set to be draggable, click or drag the mouse over the element, the text or other elements in the element will not be selected. When the user starts dragging, the dragstart event is triggered. In the dragstart event, you can specify the drag data through setData (), the image feedback through setDragImage (), and the drag effect by setting the effectAllowed property and the dropEffect property. Drag and drop data must be specified, but picture feedback is drag and drop effect is not necessary

Drag and drop data

Drag-and-drop data contains two parts of information, namely, the type of data and the value of the data. The type of data is a string, and the value of the data is also in the form of a string. The types of drag-and-drop data are: text/plain,text/html,image/jpeg,text/uri-list, etc., and can also be customized.

You can call the setData () method multiple times to set multiple drag data. As follows:

Var dt = event.dataTransfer;dt.setData ("application/x-bookmark", bookmarkString); dt.setData ('text/uri-list','www.baidu.com'); dt.setData (' text/plain','drag data')

Application/x-bookmark is a custom type.

If the new type of data is set in this method, the new drag-and-drop data will be at the end of the list of drag-and-drop data, and if it is set and the type of data that exists, the new data will overwrite the old data.

You can get the specified type of drag data through getData ().

The specified type of drag data can be cleared through clearData ().

Picture feedback

Image feedback is not required, by default it is a translucent image generated from the drag target, and the image moves with the mouse during the drag. You can customize image feedback through the setDragImage (image,xOffect,yOffect) method.

SetDragImage () accepts three parameters, the first of which represents a reference to the picture, and the second and third that represent the position of the upper-left corner of the picture relative to the mouse pointer. Units are pixels

Test target # drag {width:200px; height:200px; background-color: aqua;} .drop {width: 300px; height: 300px; background-color: antiquewhite;}

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.