Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > H5-Tutorial > Hauptteil

Implementieren von Drag-and-Drop-Effekten in HTML5, ohne auf die Techniken des Javascript_HTML5-Tutorials zurückzugreifen

WBOY
Freigeben： 2016-05-16 15:50:37
Original
1212 Leute haben es durchsucht

Wenn wir in der Webentwicklung den Drag-and-Drop-Effekt erzielen möchten, müssen wir Javascript verwenden. Lassen Sie uns heute HTML5 verwenden, um es zu implementieren:
Schauen Sie sich zuerst den HTML-Kerncode an:

Code kopieren
Der Code lautet wie folgt:

Ziehen Sie das kleine gelbe Quadrat in das große rote Feld

/div>



Das ziehbare Attribut wurde in HTML5 neu hinzugefügt. Es hat drei Werte: true, false und auto bedeutet, dass es nicht möglich ist. Weitere Informationen finden Sie in der offiziellen Dokumentation

Einen kleinen Stil hinzufügen
:



Code kopieren
Der Code lautet wie folgt:



Dann schauen wir uns Javascript an
:





Code kopieren


Der Code lautet wie folgt:


function listenEvent(eventTarget, eventType, eventHandler ) { if (eventTarget .addEventListener) {
eventTarget.addEventListener(eventType, eventHandler,false); } else if (eventTarget.attachEvent) { eventType = "on" eventType; >eventTarget.attachEvent(eventType, eventHandler );
} else {
eventTarget["on" eventType] = eventHandler;}
} // Ereignis abbrechen
function cancelEvent ( event) { if ( event.preventDefault) { event.preventDefault(); } else { event.returnValue = false
}
// Ausbreitung abbrechen
function cancelPropagation ( event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
window.onload=function() {
var target = document.getElementById("drop");
listenEvent(target, "dragover", dragOver);
listenEvent(target,"drop",function (evt) {
cancelPropagation(evt);
evt = evt || window.event;
evt.dataTransfer. dropEffect = 'copy';
var id = evt.dataTransfer.getData("Text">target.appendChild(document.getElementById(id)});
var item = document.getElementById("item") ;
item.setAttribute("draggable", "true");
listenEvent(item,"dragstart", function(evt) {
evt = evt || window .event;
evt. dataTransfer.effectAllowed = 'copy';
evt.dataTransfer.setData("Text",item.id});
function dragOver (evt) {
if (evt.preventDefault) evt.preventDefault();
evt = evt ||.
evt.dataTransfer.dropEffect = 'copy';
}


Aus dem obigen Code sehen wir die Verwendung einer Reihe von Drag-and-Drop-Ereignissen, die von HTML5 bereitgestellt werden:
Dragstart
Drag-Ereignis
Ziehen
Während des Drag-Vorgangs
Ziehen über dem Ziel; wird verwendet, um zu bestimmen, ob das Ziel das Ablegen akzeptiert Bestimmen Sie die Rückmeldung an den Benutzer.
Ablegen
Dragleave
Ziehen verlässt Ziel
Drag-Vorgang
definiert verwandte Ereignisse, um die gewünschte Funktion zu erreichen. Das obige Js ist nicht schwer zu verstehen.
Sie können es selbst ausprobieren. Opera bietet derzeit die beste Unterstützung, aber der IE funktioniert nicht gut.
Ich hoffe, es wird für Ihre Webentwicklung hilfreich sein
Verwandte Etiketten：
拖放
Quelle：php.cn
Vorheriger Artikel：CSS3-Transformation 3D Verwenden Sie CSS3, um einen dynamischen 3D-Würfel zu erstellen (HTML5-Übung)_HTML5-Tutorial-Fähigkeiten Nächster Artikel：Implementierungsschritte und Codes zum Abspielen von Videos und dynamischen Screenshots in HTML5 (unterstützt Safari und andere ungetestete)_HTML5-Tutorial-Fähigkeiten
Erklärung dieser Website
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
Neueste Artikel des Autors
Aktuelle Ausgaben
Die Seite mobilfreundlich gestalten? Ich habe viele Webseiten und einige Websites. Die Sache ist, ich bin ein Anfänger. Ich ver...
Aus 2024-04-01 20:42:38
0
1
259
Drag-and-Drop-Methode zum Hinzufügen von Textfeldern zu vom Benutzer hochgeladenen PDFs Bitte erklärt mir jemand, wie man ein Textfeld per Drag & Drop in ein hochgeladenes PD...
Aus 2024-03-31 09:46:21
0
1
276
Array im Status neu anordnen Ich verwende zustand, um einen globalen Status mit einer Reihe von Aufgabenelementen zu er...
Aus 2024-03-30 14:44:42
0
1
278
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage

Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！

Über uns Haftungsausschluss Sitemap

© php.cn All rights reserved