Xiaoqiang's road to HTML5 mobile development (16) - the magical drag-and-drop function-H5 Tutorial-php.cn

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

黄舟

Release： 2017-01-22 11:50:18

Original

1180 people have browsed it

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" >

Copy after login

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" />

Copy after login

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);  
}

Copy after login

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()

Copy after login

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));  
}

Copy after login

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>

Copy after login

Xiaoqiangs 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)!