So erzielen Sie mit H5 einen Drag-and-Drop-Effekt-H5-Tutorial-php.cn

So erzielen Sie mit H5 einen Drag-and-Drop-Effekt

php中世界最好的语言

Freigeben： 2018-03-26 11:37:57

Original

1927 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie H5 verwenden, um den Drag-and-Drop-Effekt zu erzielen, und welche Vorsichtsmaßnahmen für die Verwendung von H5 gelten, um den Drag-and-Drop-Effekt zu erzielen Ein praktischer Fall, werfen wir einen Blick darauf.

Drag & Drop

Drag & Drop ist eine gängige Funktion, bei der Sie ein Objekt greifen und es später an eine andere Stelle ziehen.

In HTML5 gehört Drag & Drop zum Standard und jedes Element kann per Drag & Drop verschoben werden.

Internet Explorer 9+, Firefox, Opera, Chrome und Safari unterstützen das Ziehen.

Hinweis:Safari 5.1.2 unterstützt kein Ziehen.

Beispiel:

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

Nach dem Login kopieren

Zuallererst: Um „Das Element kann gezogen werden“ zu verwenden, setzen Sie das dragable-Attribut auf „true“:

Dann geben Sie an, wann was passiert, wenn ein Element gezogen wird.
Im obigen Beispiel ruft das ondragstart-Attribut eine Funktion, Drag(event), auf, die die zu ziehenden Daten angibt. Die
dataTransfer.setData()-Methode legt den Datentyp und den Wert der gezogenen Daten fest:

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

Nach dem Login kopieren

in diesem Beispiel , der Datentyp ist „Text“ und der Wert ist die ID des ziehbaren Elements („drag1“).

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 den Aufruf der event.preventDefault()-Methode des ondragover-Ereignisses : event.preventDefault ()

Wenn die gezogenen Daten platziert werden, tritt das Drop-Ereignis auf.
Im obigen Beispiel ruft das ondrop-Attribut eine Funktion auf, drop(event):

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

Nach dem Login kopieren

Codeerklärung:

Rufen Sie preventDefault() auf, um die Standardverarbeitung von Daten durch den Browser zu verhindern (das Standardverhalten des Drop-Ereignisses besteht darin, als Link zu öffnen)
über dataTransfer . Die getData("Text")-Methode ruft die gezogenen Daten 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")
Das gezogene Element an das Platzierungselement (Zielelement) anhängen

Vor und zurück ziehen:

Wenn Sie zwischen zwei Stellen hin und her ziehen möchten, ändern Sie einfach den obigen Code leicht.
Ändern Sie den Code im Textkörper in:

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

Nach dem Login kopieren

Dann im Stil Just Fügen Sie #p2 in der Mitte hinzu:

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

Nach dem Login kopieren

Auf diese Weise können Sie per Drag & Drop hin und her ziehen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Ausführliche Erläuterung der Verwendung von Paging-Abfragen

Die Beziehung zwischen Zeichen und mathematischen Funktionen

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit H5 einen Drag-and-Drop-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!