Gemeinschaft
Lernen
Tools-Bibliothek
KI-Tools
Freizeit
suchen
Deutsch
Heim > Web-Frontend > H5-Tutorial > Implementieren von Drag-and-Drop-Effekten in HTML5, ohne auf die Techniken des Javascript_HTML5-Tutorials zurückzugreifen

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Freigeben： 2016-05-16 15:50:37
Original
1296 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：
Drag & Drop
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
javascript - Wie erhalte ich den Inhalt in Klammern mithilfe regulärer Ausdrücke in JS?
Aus 1970-01-01 08:00:00
0
0
0
show() ist nach Ajax-Erfolg ungültig
Aus 1970-01-01 08:00:00
0
0
0
javascript – Eine Zeile Code für den Quellcode von underscore.js schreiben
Aus 1970-01-01 08:00:00
0
0
0
javascript - Wie ändere ich den Übergangseffekt von vue1.0 in vue2.0?
Aus 1970-01-01 08:00:00
0
0
0
javascript - Woher wissen Sie, dass der Haken des Versprechens nicht geschrieben ist?
Aus 1970-01-01 08:00:00
0
0
0
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