JavaScript drag time drag case detailed explanation

Drag occurs when the user holds down the mouse button on an object, drags it to another location, and then releases the mouse button to drop the object there.

There are several types of objects that can be dragged, including element nodes, pictures, links, selected text, etc. On a web page, except for element nodes which cannot be dragged by default, everything else (pictures, links, selected text) can be dragged directly. To make an element node draggable, set the draggable attribute of the node to true .

<div draggable="true">
  This area can be dragged</div>

The draggable attribute can be used on any element node, but images ( <img> ) and links ( <a> ) can be dragged without this attribute. For them, when using this attribute, it is often set to false to prevent dragging of these two elements.

Note that once the draggable property of an element node is set to true , you can no longer select the text or child nodes inside the node with the mouse.

When an element node or selected text is dragged, drag events are continuously triggered, including the following events.

• drag : During the dragging process, it is continuously triggered on the dragged node (every few hundred milliseconds).
• dragstart : When the user starts dragging, it is triggered on the dragged node. target attribute of this event is the dragged node. Usually the dragged data should be specified in the listening function of this event.
• dragend : Triggered on the dragged node when dragging ends (releasing the mouse button or pressing the ESC key). target attribute of this event is the dragged node. It is triggered on the same node as dragstart event. Regardless of whether the drag crosses windows or is canceled midway, dragend event is always triggered.
• dragenter : When dragging into the current node, it is triggered once on the current node, and target attribute of the event is the current node. Usually, you should specify in the listening function of this event whether to allow the dragged data to be dropped on the current node. If the current node does not have a listener function for the event, or the listener function does not perform any operation, it means that data is not allowed to be dropped at the current node. The visual display of dragging into the current node is also set in the listening function of this event.
• dragover : When dragging above the current node, it is continuously triggered on the current node (every few hundred milliseconds apart), and target attribute of the event is the current node. The difference between this event and dragenter event is that dragenter event is triggered when entering the node, and then dragover event will continue to be triggered as long as the node is not left.
• dragleave : When the drag operation leaves the current node range, it is triggered on the current node. target attribute of this event is the current node. If you want to visually display the drag-and-drop operation on the current node, set it in the listener function of this event.
• drop : Triggered on the target node when the dragged node or selected text is released to the target node. Note that if the current node does not allow drop , this event will not be triggered even if you release the mouse button over the node. If the user presses the ESC key to cancel the operation, the event will not be triggered. The listening function of this event is responsible for retrieving the dragged data and performing related processing.

The following example shows how to dynamically change the background color of the dragged node.

div.addEventListener('dragstart', function (e) {
  this.style.backgroundColor = 'red';
}, false);
 
div.addEventListener('dragend', function (e) {
  this.style.backgroundColor = 'green';
}, false);

In the above code, when div node is dragged, the background color will turn red, and when the dragging ends, it will turn back to green.

The following is an example showing how to drag a node from its current parent node to another parent node.

/* HTML code is as follows <div class="dropzone">
   <div id="draggable" draggable="true">
     This node can be dragged</div>
 </div>
 <div class="dropzone"></div>
 <div class="dropzone"></div>
 <div class="dropzone"></div>
*/
 
//Dragged node var dragged;
 
document.addEventListener('dragstart', function (event) {
  // Save the dragged node dragged = event.target;
  // The background color of the dragged node becomes transparent event.target.style.opacity = 0.5;
}, false);
 
document.addEventListener('dragend', function (event) {
  // The background color of the dragged node returns to normal event.target.style.opacity = '';
}, false);
 
document.addEventListener('dragover', function (event) {
  // Prevent the drag effect from being reset and allow the dragged node to be placed in the target node event.preventDefault();
}, false);
 
document.addEventListener('dragenter', function (event) {
  // The background color of the target node changes to purple // Since the event will bubble, the node must be filtered if (event.target.className === 'dropzone') {
    event.target.style.background = 'purple';
  }
}, false);
 
document.addEventListener('dragleave', function( event ) {
  // The background color of the target node is restored if (event.target.className === 'dropzone') {
    event.target.style.background = '';
  }
}, false);
 
document.addEventListener('drop', function( event ) {
  // Prevent the default behavior of the event (for example, links can be opened on certain element nodes),
  event.preventDefault();
  if (event.target.className === 'dropzone') {
    // Restore the target node background color event.target.style.background = '';
    //Insert the dragged node into the target node dragged.parentNode.removeChild(dragged);
    event.target.appendChild( dragged );
  }
}, false);

There are several points to note about drag events.

• The dragging process only triggers the above drag events. Although the mouse is moving, the mouse events will not be triggered.
• Dragging a file from the operating system into the browser does not trigger dragstart and dragend events.
• The listener function of dragenter and dragover events is used to retrieve the dragged data (that is, to allow the dragged element to be dropped). Since most areas of a web page are not suitable as target nodes for dropping dragged elements, the default settings for these two events are that the current node is not allowed to accept the dragged element. If you want the data to be dropped on the target node, you must first prevent the default behavior of these two events.

<div ondragover="return false">
<div ondragover="event.preventDefault()">

In the above code, if you do not cancel the drag event or prevent the default behavior, you cannot drop the dragged node on div node.

DragEvent Interface

Drag events all inherit the DragEvent interface, which in turn inherits the MouseEvent interface and Event interface.

The browser natively provides a DragEvent() constructor to generate instance objects of drag events.

new DragEvent(type, options)

DragEvent() constructor accepts two parameters. The first parameter is a string indicating the type of event. This parameter is required. The second parameter is the event configuration object, which is used to set the properties of the event. This parameter is optional. In addition to accepting the configuration properties of the MouseEvent interface and the Event interface, the configuration object can also set dataTransfer property to either null or an instance of DataTransfer interface.

The DataTransfer instance object is used to read and write data transmitted in the drag event. For details, see the "DataTransfer Interface" section below.

DataTransfer Interface Overview

All instances of drag events have a DragEvent.dataTransfer property, which is used to read and write the data to be transferred. The value of this property is an instance of the DataTransfer interface.

The browser natively provides a DataTransfer() constructor to generate DataTransfer instance object.

var dataTrans = new DataTransfer();

DataTransfer() constructor does not accept any arguments.

The dragged data is divided into two aspects: the type of data (also known as format) and the value of the data. The type of data is a MIME string (such as text/plain , image/jpeg ), and the value of data is a string. Generally speaking, if you drag a piece of text, the data defaults to that text; if you drag a link, the data defaults to the link's URL.

When a drag event starts, developers can provide the data type and data value. During the dragging process, developers can use the listener functions of dragenter and dragover events to check the data type to determine whether the dragged object is allowed to be dropped. For example, in a zone that only allows dropping links, check if the data type of the drag is text/uri-list .

When a drop event occurs, the listening function retrieves the dragged data and processes it.

Instance Properties of DataTransfer

DataTransfer.dropEffect

The DataTransfer.dropEffect property is used to set the effect of dropping the dragged node, which will affect the shape of the mouse when dragging over the relevant area. It may take the following values.

• copy: copy the dragged node
• move: Move the dragged node
• link: Creates a link to the dragged node
• none: The dragged node cannot be dropped

Except for the above values, setting other values ​​is invalid.

target.addEventListener('dragover', function (e) {
  e.preventDefault();
  e.stopPropagation();
  e.dataTransfer.dropEffect = 'copy';
});

In the above code, once the dragged element drop , the receiving area will copy the node.

The dropEffect property is usually set in the listener function of dragenter and dragover events. This property has no effect on dragstart , drag , and dragleave events. Because this property is only valid for the area that receives the dragged node, it is invalid for the dragged node itself. After entering the target area, the dragging behavior will be initialized to the set effect.

DataTransfer.effectAllowed

DataTransfer.effectAllowed property sets the effects allowed in this drag. It may take the following values.

• copy: copy the dragged node
• move: Move the dragged node link: Create a link to the dragged node
• copyLink: Allow copy or link
• copyMove: Allows copy or move
• linkMove: Allow link or move
• all: Allow all effects
• none: The dragged node cannot be dropped
• uninitialized: The default value, equivalent to all

If an effect is not allowed, the user cannot achieve this effect in the target node.

This property and the dropEffect property are two aspects of the same thing. The former sets the effects allowed for the dragged node, and the latter sets the effects of the area that accepts the drag. They are often used together.

The listener function of dragstart event can be used to set this property. Setting this property in other event listener functions is invalid.

source.addEventListener('dragstart', function (e) {
  e.dataTransfer.effectAllowed = 'move';
});
 
target.addEventListener('dragover', function (e) {
  ev.dataTransfer.dropEffect = 'move';
});

As long as one of dropEffect attribute and the effectAllowed attribute is none , the drop operation cannot be completed on the target node.

DataTransfer.files

The DataTransfer.files property is a FileList object that contains a set of local files that can be used to transfer in a drag-and-drop operation. If the dragging does not involve any files, this property is an empty FileList object.

Below is an example of receiving a dragged file.

// The HTML code is as follows // <div id="output" style="min-height: 200px;border: 1px solid black;">
// Drag the file here// </div>
 
var div = document.getElementById('output');
 
div.addEventListener("dragenter", function( event ) {
  div.textContent = '';
  event.stopPropagation();
  event.preventDefault();
}, false);
 
div.addEventListener("dragover", function( event ) {
  event.stopPropagation();
  event.preventDefault();
}, false);
 
div.addEventListener("drop", function( event ) {
  event.stopPropagation();
  event.preventDefault();
  var files = event.dataTransfer.files;
  for (var i = 0; i < files.length; i++) {
    div.textContent += files[i].name + ' ' + files[i].size + 'bytes\n';
  }
}, false);

In the above code, the information of the dragged file is read through dataTransfer.files property. If you want to read the contents of a file, you need to use FileReader object.

div.addEventListener('drop', function(e) {
  e.preventDefault();
  e.stopPropagation();
 
  var fileList = e.dataTransfer.files;
  if (fileList.length > 0) {
    var file = fileList[0];
    var reader = new FileReader();
    reader.onloadend = function(e) {
      if (e.target.readyState === FileReader.DONE) {
        var content = reader.result;
        div.innerHTML = 'File: ' + file.name + '\n\n' + content;
      }
    }
    reader.readAsBinaryString(file);
  }
});

DataTransfer.types

DataTransfer.types property is a read-only array, each member of which is a string containing the format of the dragged data (usually a MIME value). For example, if the text is dragged, the corresponding member is text/plain .

The following is an example that checks the type of dataTransfer attribute to determine whether the drop operation is allowed on the current node.

function contains(list, value){
  for (var i = 0; i < list.length; ++i) {
    if(list[i] === value) return true;
  }
  return false;
}
 
function doDragOver(event) {
  var isLink = contains(event.dataTransfer.types, 'text/uri-list');
  if (isLink) event.preventDefault();
}

In the above code, dropping at the current node is allowed only when the dragged node is a link.

DataTransfer.items

DataTransfer.items property returns a read-only array-like object (DataTransferItemList instance), each member of which is an object (DataTransferItem instance) that is being dragged. If the drag does not contain an object, an empty object is returned.

A DataTransferItemList instance has the following properties and methods.

• length : Returns the number of members
• add(data, type) : Add a string with specified content and type (such as text/html and text/plain ) as a member
• add(file) : Another usage of the add method, adding a file as a member
• remove(index) : Remove the member at the specified position
• clear() : Remove all members

A DataTransferItem instance has the following properties and methods.

• kind : Returns the kind of member ( string or file ).
• type : Returns the type of the member (usually a MIME value).
• getAsFile() : If the dragged object is a file, returns the file; otherwise returns null .
• getAsString(callback) : If the object being dragged is a string, pass the character to the specified callback function for processing. This method is asynchronous, so a callback function needs to be passed in.

Here is an example.

div.addEventListener('drop', function (e) {
  e.preventDefault();
  if (e.dataTransfer.items != null) {
    for (var i = 0; i < e.dataTransfer.items.length; i++) {
      console.log(e.dataTransfer.items[i].kind + ': ' + e.dataTransfer.items[i].type);
    }
  }
});

DataTransfer Instance Methods

DataTransfer.setData()

DataTransfer.setData() method is used to set the data carried by the drag event. This method has no return value.

event.dataTransfer.setData('text/plain', 'Text to drag');

The above code adds plain text data to the current drag event.

This method accepts two parameters, both of which are strings. The first parameter indicates the data type (such as text/plain ), and the second parameter is the specific data. If data of the specified type does not exist in the dataTransfer attribute, then this data will be added, otherwise the original data will be replaced by the new data.

If you drag a text box or drag selected text, the corresponding text data will be added to dataTransfer attribute by default without manual specification.

<div draggable="true">
  aaa
</div>

In the above code, dragging this <div> element will automatically bring the text data aaa .

Use the setData method to replace the original data.

<div
  draggable="true"
  ondragstart="event.dataTransfer.setData('text/plain', 'bbb')"
>
  aaa
</div>

In the above code, the drag data is actually bbb , not aaa .

Next is adding other types of data. Since text/plain is the most commonly supported format, in order to ensure compatibility, it is recommended to always save a copy of the data in plain text format.

var dt = event.dataTransfer;
 
// Add link dt.setData('text/uri-list', 'http://www.example.com');
dt.setData('text/plain', 'http://www.example.com');
 
// Add HTML code dt.setData('text/html', 'Hello there, <strong>stranger</strong>');
dt.setData('text/plain', 'Hello there, stranger');
 
// Add the image URL
dt.setData('text/uri-list', imageurl);
dt.setData('text/plain', imageurl);

Data in multiple formats can be provided at once.

var dt = event.dataTransfer;
dt.setData('application/x-bookmark', bookmarkString);
dt.setData('text/uri-list', 'http://www.example.com');
dt.setData('text/plain', 'http://www.example.com');

In the above code, by storing three types of data on the same event, the drag event can drop different values ​​on different objects. Note that the first format is a custom format that cannot be read by the browser by default, which means that only a node that has deployed specific code can drop (read) this data.

DataTransfer.getData()

DataTransfer.getData() method accepts a string (indicating the data type) as a parameter and returns the data of the specified type brought by the event (usually the data added by setData method). If no data of the specified type exists, an empty string is returned. Usually data can only be retrieved after drop event is triggered.

The following is a drop event listening function, which is used to retrieve data of a specified type.

function onDrop(event) {
  var data = event.dataTransfer.getData('text/plain');
  event.target.textContent = data;
  event.preventDefault();
}

The above code takes out the text data of the drag event and replaces it with the text content of the current node. Note that you must also cancel the browser's default behavior at this time, because if the user drags a link, the browser will open the link in the current window by default.

The getData method returns a string. If it contains multiple data items, you must parse it manually.

function doDrop(event) {
  var lines = event.dataTransfer.getData('text/uri-list').split('\n');
  for (let line of lines) {
    let link = document.createElement('a');
    link.href = line;
    link.textContent = line;
    event.target.appendChild(link);
  }
  event.preventDefault();
}

In the above code, the getData method returns a set of links, which must be parsed by yourself.

Specifying the type value as URL will retrieve the first valid link.

var link = event.dataTransfer.getData('URL');

The following example extracts data from multiple types of data.

function doDrop(event) {
  var types = event.dataTransfer.types;
  var supportedTypes = ['text/uri-list', 'text/plain'];
  types = supportedTypes.filter(function (value) { types.includes(value) });
  if (types.length) {
    var data = event.dataTransfer.getData(types[0]);
  }
  event.preventDefault();
}

DataTransfer.clearData()

DataTransfer.clearData() method accepts a string (indicating the data type) as a parameter and deletes the data of the specified type brought by the event. If no type is specified, all data is deleted. If the specified type does not exist, calling this method has no effect.

event.dataTransfer.clearData('text/uri-list');

The above code clears the text/uri-list type data brought by the event.

This method does not remove the dragged file, so after calling this method, DataTransfer.types property may still return the Files type (provided that there is a file being dragged).

Note that this method can only be used in the listener function of dragstart event, because this is the only time when the drag operation data can be written.

DataTransfer.setDragImage()

During the dragging process (after dragstart event is triggered), the browser will display an image that moves with the mouse, indicating the node being dragged. This image is created automatically and usually shows the appearance of the dragged node. You do not need to set it yourself.

DataTransfer.setDragImage() method can customize this image. It accepts three parameters. The first one is an <img> node or a <canvas> node. If it is omitted or null , the appearance of the dragged node is used. The second and third parameters are the horizontal and right coordinates of the mouse relative to the upper left corner of the image.

Here is an example.

/* HTML code is as follows <div id="drag-with-image" class="dragdemo" draggable="true">
   drag me
 </div>
*/
 
var div = document.getElementById('drag-with-image');
div.addEventListener('dragstart', function (e) {
  var img = document.createElement('img');
  img.src = 'http://path/to/img';
  e.dataTransfer.setDragImage(img, 0, 0);
}, false);

This is the end of this article about the detailed explanation of the JavaScript drag time case. For more relevant js drag time content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!