Heim > Artikel > Web-Frontend > So erzielen Sie mit H5 einen Drag-and-Drop-Effekt

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

php中世界最好的语言Original: 2018-03-26 11:37:571934Durchsuche

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>

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

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

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>

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>

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!

php html5 firefox chrome safari 数据类型 Event 对象事件

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung des H5-Div-Layouts und des TabellenlayoutsNächster Artikel：Detaillierte Erläuterung des H5-Div-Layouts und des Tabellenlayouts

In Verbindung stehende Artikel

Mehr sehen