Home > Article > Web Front-end > HTML5 drag and drop function implementation code

HTML5 drag and drop function implementation code

黄舟Original: 2017-02-20 13:35:331366browse

In HTML5, drag and drop is part of the standard, and any element can be dragged and dropped. The specific content is as follows
1. Drag and drop

<!DOCTYPE HTML>  

    <html>  

    <head>  

    <style type="text/css">  

    #p1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}   

    </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>拖动 W3CSchool.cc 图片到矩形框中:</p>  

    <p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p>  

    <br>  

    <img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">  

    </body>  

    </html>

2. Set the element to be draggable

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

3. What to drag - ondragstart and setData()

Then, specify what will happen when the element is dragged. In the above example, the ondragstart attribute calls a function, drag(event), which specifies the data to be dragged. The dataTransfer.setData() method sets the data type and value of the dragged data:

function drag(ev)   

    {   

       ev.dataTransfer.setData("Text",ev.target.id);   

    }

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

4. Where to place - ondragover

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

5. Place it - ondrop

When When the dragged data is placed, the drop event occurs. 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 as a link). Obtain the dragged data through the dataTransfer.getData("Text") method. 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 dropped element (target element).

The above is the content of the HTML5 drag-and-drop function implementation code. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement：

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

Previous article：HTML5 and CSS3 tutorial summary (recommended)Next article：HTML5 and CSS3 tutorial summary (recommended)

See more

HTML5 drag and drop function implementation code

Related articles