HTML5 DragEvent, html5dragevent

HTML5 DragEvent, html5dragevent

DragEvent is a DOM event interface that represents the interaction between drag and drop. You can drag a pointer device (such as a mouse) to the target surface, and then drag the pointer to a new position (such as other DOM elements ). The application automatically parses the drag-and-drop interaction. The DragEvent interface inherits attributes from mouseEvent and Event.

Event types

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

Drag: this event is repeatedly triggered when an element is dragged, every one hundred milliseconds. The target element of this event is the dragged element. This event can be bubbling and the default behavior can be canceled.

Dragstart: this event is triggered when the user starts to drag. The target element of this event is the dragged element. In these events, the dragstart event is first triggered. This event can be bubbling to cancel the default behavior.

Dragenter: this event is triggered when the dragged element enters a valid drop target. The target element of this event is the drop target. This event can be bubbling to cancel the default behavior.

Dragover: this event is triggered repeatedly when the dragged element moves within the drop target range, once every one hundred milliseconds. The target element of this event is the drop target. This event can be bubbling to cancel the default behavior.

Dragend: this event is triggered when the drag ends. The target element of this event is the dragged element. Dragend is triggered in these events. This event can be bubbling and cannot be canceled by default.

Dragleave: this event is triggered when the dragged element leaves a valid drop target. The target element of this event is the drop target. This event can be bubbling and cannot be canceled by default.

Dragexit: this event is triggered when the drop element is no longer the closest drop target to the drag operation. The target element of this event is the drop element. This event can be bubbling, and the default behavior can be canceled without being tender.

Drop: this event is triggered when the pointer device of the drag element is released on the drop target. The target element of this event is the drop target. The drop event is triggered before the dragend event is triggered. This event can be bubbling to cancel the default behavior.

<! DOCTYPE html> 
The event objects of these events include the methods and attributes of the event objects of the mouse event. A dataTransfer attribute exists.
Drag an element
By default, only image, link, and selected text are drag-and-drop elements in HTML. To drag other elements, you need to do the following:
1. Set a draggable attribute for the element and set the value of this attribute to true.
2. Add a dragstart event listener to this element.
3. On the dragstart event listener, use event. DataTransfer. setData (type, value) to set the drag data.
<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">      This text <strong>may</strong> be dragged.    </div>
If the draggable attribute is disabled or set to false, the element cannot be dragged. The draggable attribute can be set on any attribute. When an element is set to drag-and-drop, the text or other elements in the element are not selected by clicking or dragging the mouse over the element. When the user starts to drag, the dragstart event will be triggered. In the dragstart event, you can use setData () to specify the drag data and setDragImage () to specify the image feedback, you can also specify the drag effect by setting the inclutallowed attribute and dropEffect attribute. Drag data must be specified, but image feedback is not required.
Drag data
The drag-and-drop Data contains two parts: the data type and the data value. The data type is a string, and the data value is also a string. Drag data can be of the following types: text/plain, text/html, image/jpeg, text/uri-list, and can 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 you use this method to set new types of data, the new drag data will be located at the end of the drag data list. If you set and existing types of data, the new data will overwrite the old data.
You can use getData () to obtain drag data of the specified type.
ClearData () can be used to clear drag data of the specified type.
Image feedback
The image feedback is not mandatory. By default, it is a translucent image generated from the drag target, and the image will move with the mouse during the drag. You can use setDragImage (image, xOffect, yOffect) to customize image feedback.
SetDragImage () accepts three parameters. The first parameter indicates the image reference, and the second and third parameters indicate the position of the upper left corner of the image relative to the mouse pointer. Unit: pixel
<! DOCTYPE html> Drag Effect
You can specify the drag-and-drop effect by setting effectAllowed and dropEffect.
DataTransfer attribute of the event object
The dataTransfer attribute is a DataTransfer object that stores data during the drag and drop operation. It may save one or more data items. This attribute is read-only.
Standard attributes in dataTransfer attributes
1. dropEffect
Obtain the type of the current drag and drop operation, or set a new type for the current drag and drop operation. This attribute may be set to none, copy, move, or link. This attribute affects the mouse display during the drag process.
2. effectAllowed
This attribute is used to specify the drag and drop operation results. Optional values include none, all, copy, move, link, copyLink, copyMove, and linkMove. The default value is all. If you want to set this attribute value, you must set it in the event handler of dragstart.
3. files
Contains a list of all available local files in data transfer. If the drag operation does not involve any files, it is an empty list.
4. items
Is a list containing all drag data. It isDataTransferItemList object.
5. types
It is a string array, which contains the drag event type set in the dragstart event handler. If the drag operation does not contain data, it gets an empty array.
Standard Method for DataTransfer attributes
1. clearData (type): Remove drag data related to a given type. Accept an optional parameter. If this parameter is null or not specified, remove the data of this type. If the specified type does not exist or the data transfer does not contain data, this method will not have any impact.
2. getData (type): Get the drag data of the specified type. If the specified type of data does not exist or the data transfer does not contain data, an empty string is obtained.
3. setData (type, value): Set the drag data of the given type. Two parameters are accepted. The first parameter is type, and the second parameter is the value of the specified type. If the value of this type does not exist, add a new format at the end of the Type list. If the format already exists, the data that exists at the same position will be replaced.
4. setDragImage (image, xoffset, yoffset): three parameters are accepted. The first parameter is the image reference, and the second and third parameters are the cursor positions in the upper left corner of the moved image.
DataTransferItemList object
The value obtained through dataTransfer. items is the DataTransferList object.
Properties of the DataTransferItemList object
1. length: Get the number of drag data
DataTransferItemList object Method
1. add (): add a new drag data to the drag data list. After the drag data is successfully added, the new drag data is returned. When a file is added to the drag data list, this method only accepts one file object as the parameter. When you add a string of the given type to the drag data list, this method accepts two parameters. The first parameter is data, and the second parameter is type.
2. remove (index): remove the drag data at the specified position from the drag data list. This method accepts a parameter indicating the position. If this parameter is smaller than 0 or greater than the length of the drag data list, the drag data list will not change.
3. clear (): Remove all drag data from the drag data list. No parameter is required.
4. DataTransferItem (index): Get the drag data at the specified position. Accept a parameter indicating the location. This method is abbreviated as an array index.
DataTransferItem object
Each item in dataTransfer. items is a DataTransferItem object.
Properties of the DataTransferItem object
1. kind: Get the key for dragging data. The possible values include file and string.
2. type: The drag data type, which is MINE type.
DataTransferItem object Method
1. getAsFile (): returns the object of the drag data file. If the drag data is not a file, null is returned.
2. getAsString (function): Call the callback function. This callback function uses the string form of the drag-and-drop data item as its parameter.
Drag a file
An important step for a file to be dragged and dropped is to define a placement area. Add drop, dragover, and dragend event handlers to the placement area.
When a drop event handler is added to an element and the default behavior of the browser is canceled in the dragover event handler, this element is the placement area.
In addition, after the drag and drop operations are complete, the application should remove the drag data (which may be one or more files), and the data is usually cleared in the dragend event handler.
<div id="drop_zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend = "dragend_handler(event)">  <strong><Drag one or more files to this Drop Zone ...</strong></div>
 
Example 1: Access File Name
function drop_handler(ev) {  console.log("Drop");  ev.preventDefault();  // If dropped items aren't files, reject them  var dt = ev.dataTransfer;  if (dt.items) {    // Use DataTransferItemList interface to access the file(s)    for (var i=0; i < dt.items.length; i++) {      if (dt.items[i].kind == "file") {        var f = dt.items[i].getAsFile();        console.log("... file[" + i + "].name = " + f.name);      }    }  } else {    // Use DataTransfer interface to access the file(s)    for (var i=0; i < dt.files.length; i++) {      console.log("... file[" + i + "].name = " + dt.files[i].name);    }  }}
Example 2: block default browser behavior
function dragover_handler(ev) {  console.log("dragOver");  // Prevent default select and drag behavior  ev.preventDefault();}
Example 3: Clear Data
function dragend_handler(ev) {  console.log("dragEnd");  // Remove all of the drag data  var dt = ev.dataTransfer;  if (dt.items) {    // Use DataTransferItemList interface to remove the drag data    for (var i = 0; i < dt.items.length; i++) {      dt.items.remove(i);    }  } else {    // Use DataTransfer interface to remove the drag data    ev.dataTransfer.clearData();  }}