Html5 native drag and drop operation example explanation

This article mainly introduces the detailed explanation of the native drag and drop operation of Html5. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

The drag and drop function of H5 was used in a recent project development. Since the existing project uses VUE family bucket, the vuedragable plug-in is used, but the whole process is quite painful. So I decided to start studying the principles of H5 drag and drop, and then apply it to the data-driven framework. To implement drag and drop operations in H5, at least two steps are required: 1) Set the draggable attribute of the object element you want to drag and drop to true (img and a elements allow drag and drop by default); 2) Writing and dragging Relevant event handling code. For the convenience of testing, I first use the jQuery library to complete the basic drag and drop function.

1. Drag process

1.1 Drag event

When the mouse is pressed and dragged while dragging the draggable element will be triggered in the following order

dragstart -> drag -> dragend

1. dragstart: Triggered when the mouse is pressed and started to drag (triggered once)

2. drag: Triggered while holding down the mouse and dragging (continuously triggered)

3. dragend: Triggered after releasing the mouse (no matter whether The element is placed on a valid placement target or an invalid placement target)

1.2 Placement event

When the draggable element is dragged Moving into the container will trigger

dragenter in the following order -> dragover -> drop

dragenter: As long as an element is dragged to the drop target, the dragenter event will be triggered.
dragover: dragenter is followed by the dragover event, and this event will continue to be triggered while the dragged element is still moving within the range of the drop target.
dragleave: When the element is dragged out of the drop target, dragleave will be triggered.
drop: When the dragged element is placed on the target element, it will be triggered.

1.3 Complete event flow

From starting to drag the element to placing the element into the target area, it will be triggered in the following order

dragstart->drag->dragenter->dragover->dragleave-> ;drop->dragend

2. Solve the problem that firefox does not support drag

If we directly add the draggable attribute to an element, in chrome and opera It is possible to drag and drop directly (there is no release operation (such as the arrow changing to a + sign)), but there is no response in firefox

    <ul class="canDrog">
        <li draggable="true" id="1">优</li>
        <li draggable="true" id="2">良</li>
        <li draggable="true" id="3">中</li>
        <li draggable="true" id="4">差</li>
    </ul>
    <script>
        //没有任何JS代码
    </script>

To solve this problem, you must drag Bind the dragstart event handling function to the drag element, and call the event.dataTransfer.setData function in this function

<script>
     <ul class="canDrog">
        <li draggable="true" id="1">优</li>
        <li draggable="true" id="2">良</li>
        <li draggable="true" id="3">中</li>
        <li draggable="true" id="4">差</li>
    </ul>
    $(&#39;.canDrog > li&#39;).bind(&#39;dragstart&#39;,function(event){
        //firefox 必须访问用于拖拽通信的dataTransfer对象
        event.dataTransfer.setData("Text",&#39;1&#39;);
    });
</script>

3. Solve the problem of dragging elements to chrome and opera The releasable logo is not displayed when in the container.

The releasable logo may be different depending on the operating system. What appears in mac chrome is a circular logo with a white '+ embedded inside it. '.

The solution is to bind the dragover event to the container

     <ul class="canDrog">
        <li draggable="true" id="1">优</li>
        <li draggable="true" id="2">良</li>
        <li draggable="true" id="3">中</li>
        <li draggable="true" id="4">差</li>
    </ul>
    <table class="dataTbl">
            <thead>
                <tr>
                    <th style="width: 10%">节次/星期</th>
                    <th>周一</th>
                    <th>周二</th>
                    <th>周三</th>
                    <th>周四</th>
                    <th>周五</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>第一节</td>
                    <td draggable="true" ></td>
                    <td draggable="true" ></td>
                    <td draggable="true" ></td>
                    <td draggable="true" ></td>
                    <td draggable="true" ></td>
                </tr>
                <!--此处省略-->
            </tbody>
    </table>
<script>
    $(&#39;.canDrog > li&#39;).bind(&#39;dragstart&#39;,function(event){
        //firefox 必须访问用于拖拽通信的dataTransfer对象
        event.dataTransfer.setData("Text",&#39;1&#39;);
    });
    //google chrome,opera需要添加
    $(".dataTbl").bind("dragover",&#39;td&#39;,function(e){  
        e.originalEvent.preventDefault();  
    })  
</script>

4. Solve the problem of firefox opening a new tab when placed

If you release the dragged element when using Firefox, the default browser will open a new tab, as follows

This is due to the drop callback After the function, the browser performs the default behavior. The usual solution is to add code to prevent the default event execution and bubbling in the drop hook of the drag container.

<script>
    //将元素释放到当前元素中
    $(&#39;.dataTbl&#39;).bind(&#39;drop&#39;,&#39;td&#39;,function(event){
        console.log(&#39;+++drop&#39;);
        event.preventDefault();
        event.stopPropagation();
    });
</script>

However, if you drag the draggable element to other places, it will still cause the problem of opening new tabs. In this case, you can add the above code to all containers.

5. Write a complete small example

Source code: https://github .com/pluslicy/drag

Then we will learn the vuedraggable plug-in library and apply it in the vue framework

Related recommendations:

How to do H5 Produce drag and drop effect

Bootstrap Modal Add drag and drop method example

Simple drag and drop shopping cart function implemented by JS

The above is the detailed content of Html5 native drag and drop operation example explanation. For more information, please follow other related articles on the PHP Chinese website!