Detailed explanation of H5’s drag and drop function

This time I will bring you a detailed explanation of the drag-and-drop function of H5. What are the precautions for implementing the drag-and-drop function of H5? The following is a practical case, let’s take a look.

About drag and drop in HTML5

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 a standard part. In HTML5 users can use the mouse to select a draggable element, drag the element to a droppable element, and drop the element by releasing the mouse button. A translucent representation of a draggable element follows the mouse pointer during a drag operation.

If we want the element to be dragged, then we need to set its draggable attribute to true (the a tag draggable defaults to true)

Drag and drop events

Several events will be triggered at different stages of the drag-and-drop operation. The dataTransfer attribute of the drag-and-drop event stores the relevant data in the drag-and-drop operation.

dragstart	Acts on [source element] and is triggered when an element starts to be dragged. The dragstart event needs to be attached to the element dragged by the user. In this event, the listener will set the information related to this drag, such as the dragged data and image.
dragenter	Acts on [source element], triggered when the dragging mouse enters an element. The listener for this event needs to indicate whether the mouse is allowed to be released in this area. If no listener is set, or the listener does not operate, release is not allowed by default.
dragover	Acts on [target element], triggered when the mouse during dragging moves past an element.
dragleave	Acts on [target element], triggered when the dragging mouse leaves the element. Can be removed as a highlight or insertion mark that releases feedback.
drag	Acts on [source element], and the event is triggered when the element is dragged.
drop	Acts on [target element] and is triggered on the released element when the drag operation is completed.
dragend	Acts on [source element]. The drag source is triggered when the drag operation ends, regardless of whether the operation is successful or not.

(Only drag-related events will be triggered when dragging, mouse events, such as mousemove, will not be triggered)

DataTransfer Object

When processing drag-and-drop operations, we need to use the DataTransfer object to save the dragged data. DataTransfer can save one or more pieces of data, one or more data types.
Attribute

dropEffect	dropEffect                [String] Specifies the actual placement effect, possible values:             copy: Copy to new location             move: Move to a new location              link: Create a link from the source location to the new location None: Forbidden to place (prohibited any operation)
# Effectallowed	[String] Specify the allowable effect when dragging, possible values:              copy: Copy to a new location.               move: Move to a new location .                                                                                                                                                                                                       link: Establish a link from the source location to the new location.            copyLink: Allows copying or linking.             copyMove: Allows copying or moving.            linkMove: Allow linking or moving.              all: Allow all operations. ​ ​ ​ none: All operations are prohibited. ​​​​​​ uninitialized: Default value (default value), equivalent to all.
files	Contains a list of all local files available for data transfer. If the drag operation does not involve dragging a file, this property is an empty list.
types	Save a list of types of stored data as the first item, in the same order as the data is added. If no data has been added an empty list will be returned.

Method

void addElement(Element element)	Set the drag source. Usually there is no need to change this. Modifying this will affect which node is dragged and the triggering of the dragend event. The default target is the dragged node
void clearData(String type)	Deletes the data associated with the given type. Type parameters are optional. If the type is empty or not specified, all data associated with the type will be deleted. This method will have no effect if the specified type of data does not exist, or if the data transfer does not contain any data.
String getData(String type)	Get the data of the given type. If the data of the given type does not exist or the data dump does not contain the data, the method will return An empty string.
void setData(String type,String data)	Set data for a given type. If the data type does not exist, it will be added to the end so that the last item in the type list will be the new format. If the data type already exists, replaces the existing data in the same location. That is, when replacing data of the same type, the order of the type list will not be changed.
void setDragImage(DOMElement image,long x,long y)	Customize a desired drag image. In most cases, this is not necessary because the dragged node is created as a default image.            image To be used as drag feedback image element             x horizontal offset within the image. y Vertical offset within the image.

Browser support

Internet Explorer 9+, Firefox, Opera 12, Chrome and Safari 5+

Demo Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Drag & Drop</title>
<style type="text/css">
.box {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid #ccccff;
    background-color: #ccccff;
    text-align: center;
    line-height: 100px;
}
.bin {
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 1px solid #ccccff;
    overflow: hidden;
    float: left;
}
</style>
</head>
<body>
    <p style="display: table;">
        <p class="bin">
            <p class="box" draggable="true">可拖拽元素</p>
        </p>
        <p class="bin"> </p>
    </p>
    <script type="text/javascript">
        var bins = document.querySelectorAll('.bin');
        var boxs = document.querySelectorAll('.box');
        var drag = null;
        for (var i = 0; i < boxs.length; i++) {
            var box = boxs[i];
            box.onselectstart = function() {
                return false;
            };
            box.ondragstart = function(e) {
                e.dataTransfer.effectAllowed = &#39;move&#39;;
                e.dataTransfer.setData(&#39;text/plain&#39;, e.target.outerHTML);
                e.dataTransfer.setDragImage(e.target, 0, 0);
                drag = this;
                return true;
            };
            box.ondragend = function(e) {
                drag = null;
                return false
            };
        }
        for (var i = 0; i < bins.length; i++) {
            var bin = bins[i];
            //当拖曳元素进入目标元素
            bin.ondragover = function(e) {
                e.preentDefault();
                return true;
            };
            //拖拽元素在目标元素上移动
            bin.ondragenter = function(e) {
                this.style.backgroundColor = &#39;#eeeeff&#39;;
                return true;
            };
            //拖拽元素在目标元素上离开
            bin.ondragleave = function(e) {
                this.style.backgroundColor = &#39;#fff&#39;;
                return true;
            };
            //拖拽的元素在目标元素上同时鼠标放开
            bin.ondrop = function(e) {
                if (drag) {
                    drag.parentNode.removeChild(drag);
                    this.appendChild(drag);
                }
                this.style.backgroundColor = &#39;#fff&#39;;
                return false;
            };
        }
        document.body.ondrop = function(e) {
            e.preventDefault();
            e.stopPropagation();
        }
    </script>
</body>
</html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of H5 synthesis poster

Drag event editor realizes drag and drop upload image effect

The above is the detailed content of Detailed explanation of H5’s drag and drop function. For more information, please follow other related articles on the PHP Chinese website!