Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (16) – die magische Drag-and-Drop-Funktion-H5-Tutorial-php.cn

Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (16) – die magische Drag-and-Drop-Funktion

黄舟

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

Original

1179 Leute haben es durchsucht

Mit der rasanten Entwicklung von Smartphones ist die Drag-and-Drop-Funktion zur Mode geworden, aber fehlt diese praktische und schnelle Funktion noch in unseren Browsern? Es gibt Standards für Drag-and-Drop im neuen HTML5-Standard. Als Teil des HTML5-Standards kann jedes Element per Drag & Drop verschoben werden.

1. Browser-Unterstützung

Internet Explorer 9, Firefox, Opera 12, Chrome und Safari 5 unterstützen Drag & Drop.

Hinweis: Drag & Drop wird in Safari 5.1.2 nicht unterstützt.

2. So verwenden Sie

Um das Element ziehbar zu machen, setzen Sie zunächst das ziehbare Attribut auf true:

<img  draggable="true" / alt="Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (16) – die magische Drag-and-Drop-Funktion" >

Nach dem Login kopieren

Dann wird das Element gezogen , Was passiert

Lassen Sie das Attribut ondragstart eine Funktion aufrufen und ein Drag-Objekt an die Funktion zurückgeben

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

Nach dem Login kopieren

dataTransfer.setData()-Methodeneinstellung Daten Typ und Wert der gezogenen Daten: (Wir übergeben die ID des gezogenen Objekts an dataTransfer) Wo soll

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

Nach dem Login kopieren

abgelegt werden - ondragover

Das ondragover-Ereignis gibt an, wo die gezogenen Daten platziert werden sollen.

Standardmäßig können Daten/Elemente nicht in anderen Elementen platziert werden. Wenn wir die Platzierung zulassen müssen, müssen wir die Standardbehandlung des Elements verhindern.

Dies geschieht durch Aufrufen der Methode event.preventDefault() des ondragover-Ereignisses:

event.preventDefault()

Nach dem Login kopieren

Wenn die gezogenen Daten platziert werden, tritt das Drop-Ereignis ein.

Im Obigen ruft das ondrop-Attribut eine Funktion auf, 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));  
}

Nach dem Login kopieren

Code-Erklärung:

Call präventDefault() um die Standardverarbeitung von Daten durch den Browser zu vermeiden (das Standardverhalten des Drop-Ereignisses besteht darin, als Link zu öffnen)
Rufen Sie die gezogenen Daten über die Methode dataTransfer.getData("Text") ab . Diese Methode gibt jeden Datensatz in den gleichen Typ wie in der setData()-Methode zurück.
Die gezogenen Daten sind die ID des gezogenen Elements („drag1“)
Hängen Sie das gezogene Element an das Platzierungselement (Zielelement) an )中

2. Beispiel

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

Nach dem Login kopieren

Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (16) – die magische Drag-and-Drop-Funktion

Das Obige ist Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (16) - Magie Für mehr Informationen zur Drag-and-Drop-Funktion finden Sie auf der chinesischen PHP-Website (www.php.cn)!