Home > Web Front-end > H5 Tutorial > HTML5 Advanced Tutorial--Drag-and-Drop API to Implement Drag-and-Drop Sorting

HTML5 Advanced Tutorial--Drag-and-Drop API to Implement Drag-and-Drop Sorting

零下一度
Release: 2017-05-12 12:02:36
Original
1740 people have browsed it

Preface

HTML5 provides a direct drag-and-drop API, which is great It is convenient for us to realize the drag-and-drop effect. We don't need to write a lot of js. We can realize various drag-and-drop functions by simply listening to the drag-and-drop event of the element.

If you want to drag and drop an element, you must set the draggable attribute of the element to true. When this attribute is false, dragging and dropping will not be allowed. Both the img element and the a element have the draggable attribute set to true by default, so they can be dragged and dropped directly. If you do not want to drag and drop these two elements, just set the attribute to false.

Drag and drop events

Drag and drop events are generated by different elements. When an element is dragged and dropped, it may pass through many elements before finally reaching the element you want to place. Here, I temporarily call the dragged element the source object, the passed element the process object, and the arrived element the target object. Different objects generate different drag and drop events.

Source object:

  • dragstart: The source object starts dragging and dropping.

  • drag: During the drag and drop process of the source object.

  • dragend: Drag and drop of the source object ends.

  • Process object:

  • dragenter: The source object begins to enter the scope of the process object.

  • dragover: The source object moves within the scope of the process object.

  • dragleave: The source object leaves the scope of the process object.

  • Target object:

  • drop: The source object is dragged and dropped into the target object.

  • <p id="source" draggable="true">a元素</p>
    <p id="process">b元素</p>
    <p id="target">c元素</p>
    
    <script>
        var source = document.getElementById(&#39;source&#39;),     // a元素
            process = document.getElementById(&#39;process&#39;),   // b元素
            target = document.getElementById(&#39;target&#39;);     // c元素
        
        source.addEventListener(&#39;dragstart&#39;,function(ev){   // dragstart事件由a元素产生
            console.log(&#39;a元素开始被拖动&#39;);
        },false)
    
        process.addEventListener(&#39;dragenter&#39;,function(ev){  // dragenter事件由b元素产生
            console.log(&#39;a元素开始进入b元素&#39;);
        },false)
        process.addEventListener(&#39;dragleave&#39;,function(ev){  // dragleave事件由b元素产生
            console.log(&#39;a元素离开b元素&#39;);
        },false)
    
        target.addEventListener(&#39;drop&#39;,function(ev){        // drop事件由c元素产生
            console.log(&#39;a元素拖放到c元素了&#39;);
            ev.preventDefault();
        },false)
        document.ondragover = function(e){e.preventDefault();}
    </script>
    Copy after login

    dataTransfer object

    Provides a data transfer object dataTransfer in all drag and drop events, used to transfer data between the source object and the target object. Next, let's get to know the methods and properties of this object to understand how it transfers data.

    setData()

    This method stores data into the dataTransfer object. Receives two parameters. The first one is a string indicating the type of data to be stored. Currently, the following types are supported:

  • text/plain: text text.

  • text/html: HTML text.

  • text/xml: XML text.

  • text/uri-list: URL list, each URL is one line.

  • The second parameter is the data to be stored. For example:

    event.dataTransfer.setData(&#39;text/plain&#39;,&#39;Hello World&#39;);
    Copy after login

    getData()

    This method reads data from the dataTransfer object. The parameter is the data type specified in setData. For example:

    event.dataTransfer.getData(&#39;text/plain&#39;);
    Copy after login

    clearData()

    This method clears the data stored in the dataTransfer object. The parameter is optional and is the data type. If the parameter is empty, all types of data will be cleared. For example:

    event.dataTransfer.clearData();
    Copy after login

    setDragImage()

    This method sets the drag and drop icon by using the img element. Receives three parameters, the first is the icon element, the second is the X-axis displacement of the icon element from the mouse pointer, and the third is the Y-axis displacement of the icon element from the mouse pointer. For example:

    var source = document.getElementById(&#39;source&#39;),
        icon = document.createElement(&#39;img&#39;);
    
    icon.src = &#39;img.png&#39;;
    
    source.addEventListener(&#39;dragstart&#39;,function(ev){
        ev.dataTransfer.setDragImage(icon,-10,-10)
    },false)
    Copy after login

    effectAllowed and dropEffect properties

    These two properties are combined to set the visual effect of drag and drop.

    It is worth noting: IE does not support dataTransfer objects. Yes, it is not supported regardless of IE version.

    Implement drag-and-drop sorting

    We are already familiar with the use of drag-and-drop API. Let’s implement a simple drag-and-drop sorting, which is also common in projects. Let’s sort out the idea first:

  • In a list, each element can be dragged and dropped. Then you must first set the draggable attribute to true for each element.

  • Listen to the dragstart event of each element and style the source object to distinguish it.

  • Listen to the dragenter event of each element. When the source object enters the current element, add the source object before the element. In this way, the following elements will be squeezed out by the source object, achieving a sorting effect.

  • But you will find that the source object cannot be ranked last, but can only be ranked second to last. At this time, you need to listen to the dragleave event. When the process object is the last element, the source object leaves the process object, and then the source object is added to the end.

  • The main code is as follows:

    var source = document.querySelectorAll(&#39;.list&#39;),
        dragElement = null;
    
    for(var i = 0; i < source.length; i++){
        source[i].addEventListener(&#39;dragstart&#39;,function(ev){
            dragElement = this;
        },false);
    
        source[i].addEventListener(&#39;dragenter&#39;, function(ev){
            if(dragElement != this){
                this.parentNode.insertBefore(dragElement,this);
            }
        }, false)
    
        source[i].addEventListener(&#39;dragleave&#39;, function(ev){
            if(dragElement != this){
                if(this == this.parentNode.lastElementChild || this == this.parentNode.lastChild){
                    this.parentNode.appendChild(dragElement);
                }
            }
        }, false)
    };
    
    document.ondragover = function(e){e.preventDefault();}
    document.ondrop = function(e){e.preventDefault();}
    Copy after login

    Complete code address: drag-demo

    Compatible

    Mainly not compatible with IE OK, but at least the above drag sorting is compatible with IE10.

    And in my simple experiment, I found that when the element is not set to height in IE, the dragleave event will not be triggered.

    The more important point is that they are completely incompatible on ios and Android. Fortunately, there is a plug-in that makes it perfectly compatible with mobile devices.
    Plug-in address: ios-html5-drag-drop-shim

    You only need to introduce the plug-in into the original code to realize dragging on the mobile terminal.

    <script>
    var iosDragDropShim = { enableEnterLeave: true }
    </script>
    <script src="vendor/ios-drag-drop.js"></script>
    Copy after login

【Related recommendations】

1. Free h5 online video tutorial

2. HTML5 Complete Manual

3. php.cn Original HTML5 Video Tutorial

The above is the detailed content of HTML5 Advanced Tutorial--Drag-and-Drop API to Implement Drag-and-Drop Sorting. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template