Implementation code of HTML5 drag and drop effect-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

Implementation code of HTML5 drag and drop effect

黄舟

Feb 21, 2017 pm 01:11 PM

html5

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:

<!DOCTYPE html>  
<html>  
<head>  
    <title>拖放</title>  
    <style type="text/css">  
        #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>  
</head>  
<body>  
    <p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>  
    <br />  
    <img id="drag1" src="img/bg_1.jpg" draggable="true" ondragstart="drag(event)"  width="300px" height="180px" />  
</body>  
</html>

Copy after login

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

Then, specify that when the element is dragged, what will happen What.
In the above example, 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);
}

Copy after login

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

ondragover event Specifies 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 ondragover event : event.preventDefault()

When the dragged data is placed, a drop will occur event.
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));
}

Copy after login

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:

<body>  
    <p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)">  
    <img id="drag1" src="img/bg_1.jpg" draggable="true" ondragstart="drag(event)"  width="300px" height="180px" /></p>  
    <p id="p2" ondrop="drop(event)" ondragover="allowDrop(event)"></p>  
</body>

Copy after login

Then add #p2 to the style:

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

Copy after login

This way you can drag and drop back and forth.

The above is the content of the implementation code of HTML5 drag and drop effect. For more related content, please pay attention to the PHP Chinese website (www.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