Home > Article > Web Front-end > Xiaoqiang’s road to HTML5 mobile development (16) - the magical drag-and-drop function

Xiaoqiang’s road to HTML5 mobile development (16) - the magical drag-and-drop function

黄舟Original: 2017-01-22 11:50:181156browse

With the rapid development of smart phones, drag-and-drop function has become a fashion, but is this convenient and fast function still missing in our browsers? There are standards for drag-and-drop in the new HTML5 standard. , as part of the Html5 standard, any element can be dragged and dropped.

1. Browser support

Internet Explorer 9, Firefox, Opera 12, Chrome and Safari 5 support drag and drop.

Note: Drag and drop is not supported in Safari 5.1.2.

2. How to use

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

<img  draggable="true" / alt="Xiaoqiang’s road to HTML5 mobile development (16) - the magical drag-and-drop function" >

Then, specify that when the element is dragged, what will happen What

Let the ondragstart attribute call a function and return a drag object to the function

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

dataTransfer.setData() method sets the dragged data Data type and value: (We will pass the id of the dragged object to dataTransfer)

function drag(ev)  
{  
<span style="white-space:pre">  </span>ev.dataTransfer.setData("Text",ev.target.id);  
}

Where to put it - ondragover

ondragover event is specified in 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, the ondrop attribute calls a function, drop(event):

function drop(ev)  
{  
<span style="white-space:pre">  </span>ev.preventDefault();  
<span style="white-space:pre">  </span>var data=ev.dataTransfer.getData("Text");  
<span style="white-space:pre">  </span>ev.target.appendChild(document.getElementById(data));  
}

Code explanation:

Call preventDefault() to avoid browsing The default processing of data by the processor (the default behavior of the drop event is to open it in the form of 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 placement element (target element)中

2. Example description

<!DOCTYPE HTML>  
<html>  
    <head>  
        <script type="text/javascript">  
            //阻止对元素的默认处理方式  
            function allowDrop(ev)  
            {  
                ev.preventDefault();  
            }  
              
            //将被拖动对象的id传递给dataTransfer中间对象  
            function drag(ev)  
            {  
                ev.dataTransfer.setData("Text",ev.target.id);  
            }  
              
            //取得拖动对象id找到对象实例并用DOM模型添加到<div>里面  
            function drop(ev)  
            {  
                ev.preventDefault();  
                var data=ev.dataTransfer.getData("Text");  
                ev.target.appendChild(document.getElementById(data));  
            }  
        </script>  
    </head>  
    <body>  
        <!--要被拖动到的地方-->  
        <div id="div1" ondrop="drop(event)"    
        ondragover="allowDrop(event)"    
        style="border:1px solid red;width:300px;height:200px;">  
        </div>  
        <!--要被拖动的对象-->  
        <img id="drag1" src="test.png" draggable="true"  
        ondragstart="drag(event)"/>  
  
    </body>  
</html>

Xiaoqiang’s road to HTML5 mobile development (16) - the magical drag-and-drop function

The above is Xiaoqiang’s HTML5 mobile development road (16)-Magical Drag 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：Xiaoqiang’s road to HTML5 mobile development (15) - Audio in HTML5Next article：Xiaoqiang’s road to HTML5 mobile development (15) - Audio in HTML5

See more

Xiaoqiang’s road to HTML5 mobile development (16) - the magical drag-and-drop function

Related articles