So implementieren Sie Drag & Drop in H5-HTML-Tutorial-php.cn

So implementieren Sie Drag & Drop in H5

php中世界最好的语言

Freigeben： 2018-01-19 09:28:57

Original

2006 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie Drag & Drop in H5 implementieren. Welche Vorsichtsmaßnahmen getroffen werden sollten, um den Drag & Drop-Effekt in H5 zu erzielen Schauen Sie mal rein.

Einführung

Drag-and-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.

Klicken Sie zuerst auf ein kleines Beispiel: Führen Sie JavaScript aus

<p draggable="true" ondragstart="myFunction(event)">拖动我!</p>

Nach dem Login kopieren

, wenn der Benutzer beginnt, das

-Element zu ziehen : Links und Bilder sind standardmäßig ziehbar und erfordern nicht das Draggable-Attribut.

Definition und Verwendung

Die folgenden Ereignisse werden während des Drag-and-Drop-Vorgangs ausgelöst:

Löst das Ereignis auf dem Drag-Ziel (Quellelement) aus ): ondragstart – wird ausgelöst, wenn der Benutzer mit dem Ziehen des Elements beginnt

ondrag – wird ausgelöst, wenn das Element gezogen wird

ondragend – wird ausgelöst, wenn der Benutzer mit dem Ziehen des Elements fertig ist

wird ausgelöst wenn das Ziel losgelassen wird: ondragenter – Dieses Ereignis wird ausgelöst, wenn das mit der Maus gezogene Objekt in den Geltungsbereich seines Containers gelangt

ondragover – Dieses Ereignis wird ausgelöst, wenn ein gezogenes Objekt in den Geltungsbereich eines anderen Objekts gezogen wird Container

ondragleave – Dieses Ereignis wird ausgelöst, wenn das mit der Maus gezogene Objekt den Bereich seines Containers verlässt

ondrop – Dieses Ereignis wird ausgelöst, wenn die Maustaste während eines Ziehvorgangs losgelassen wird

Unterstützung für das Durchsuchen von Geräten

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

Hinweis: Safari 5.1.2 unterstützt das Ziehen nicht; beim Ziehen eines Elements wird das Ondragover-Ereignis alle 350 Millisekunden ausgelöst.

Beispiele

Veröffentlichen Sie zuerst den Code und erklären Sie ihn dann einzeln:

<!DOCTYPE html>
<html>
<head>
<title>HTML5拖拽</title>
<meta charset="utf-8">
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<p>拖动img_w3slogo.gif图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="images/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" width="300" height="56">
 
<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>
</body>
</html>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Inhalte Bitte achten Sie auf andere chinesische PHP-Websites. Verwandte Artikel!

Verwandte Lektüre:

So implementieren Sie die HTML-Tabellen-Maus-Drag-Sortierung

Zu welcher Datei gehört HTML? öffnen

Was ist die Standardverwendung von Kommentaren in HTML, CSS und JS

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Drag & Drop in H5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!