How to use H5 to achieve drag and drop effect

This time I will show you how to use H5 to achieve the drag-and-drop effect. What are the precautions for using H5 to achieve the drag-and-drop effect. The following is a practical case, let’s take a look.

Drag and drop

Drag and drop is a common feature where you grab an object and then drag it to another location.

In HTML5, drag and drop is part of the standard, and any element can be dragged and dropped.

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support dragging.

Note:Safari 5.1.2 does not support dragging.

Example:

nbsp;html>  
  
  
    <title>拖放</title>  
    <style>  
        #p1{width:360px;height:220px;padding:20px;border:1px solid black;}  
    </style>  
    <script>  
        function allowDrop(ev) {  
            ev.preventDefault();  
        }  
        function drag(ev) {  
            ev.dataTransfer.setData("Text", ev.target.id);  
        }  
        function drop(ev) {  
            ev.preventDefault();  
            var data = ev.dataTransfer.getData("Text");  
            ev.target.appendChild(document.getElementById(data));  
        }  
    </script>  
  
  
    <p></p>  
    <br>  
    <img  src="/static/imghwm/default1.png" data-src="img/bg_1.jpg" class="lazy" alt="How to use H5 to achieve drag and drop effect" >  
  

First, in order to make the element accessible Drag, set the draggable attribute to true:

Then, specify when the element is What happens when you drag.
In the above example, the ondragstart attribute calls a function, drag(event), which specifies the data to be dragged.
dataTransfer.setData() method Set the data type and value of the dragged data:

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

In this example, data The type is "Text" and the value is the id of the draggable element ("drag1").

ondragover EventSpecifies where to place the dragged data.
By default, data/elements cannot be placed into other elements. If we need to allow placement, we must prevent the default handling of the element.
This is done by calling the event.preventDefault() method of the ondragover event : event.preventDefault()

When the dragged data is placed, the drop event will occur.
In the above example, the ondrop attribute calls a function, drop(event):

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

Code explanation:

Call preventDefault() To avoid the browser's default processing of data (the default behavior of the drop event is to open it as a link)
Through dataTransfer.getData( "Text") methodGet the dragged data. This method will return any data set to the same type in the setData() method.
The dragged data is the id of the dragged element ("drag1")
Append the dragged element to the placed element (target element)

Drag back and forth:

If you want to drag back and forth between two places, just slightly modify the above code.
Change the code in the body to:

  
    <p>  
    <img  src="/static/imghwm/default1.png" data-src="img/bg_1.jpg" class="lazy" alt="How to use H5 to achieve drag and drop effect" ></p>  
    <p></p>  

Then add in the style Just go to #p2:

<style>  
        #p1,#p2{width:360px;height:220px;padding:20px;border:1px solid black;}  
    </style>

This way you can drag and drop back and forth.

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 the use of paging queries

The relationship between characters and mathematical functions

The above is the detailed content of How to use H5 to achieve drag and drop effect. For more information, please follow other related articles on the PHP Chinese website!