Heim > Artikel > Web-Frontend > So implementieren Sie Drag & Drop in H5
So implementieren Sie Drag & Drop in H5
- php中世界最好的语言Original
- 2018-01-19 09:28:571964Durchsuche
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>
, wenn der Benutzer beginnt, das e388a4556c0f65e1904146cc1a846bee-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>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!