suchen

Heim  >  Artikel  >  Web-Frontend  >  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

WBOY
WBOYOriginal
2016-05-16 15:50:371209Durchsuche

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
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：CSS3-Transformation 3D Verwenden Sie CSS3, um einen dynamischen 3D-Würfel zu erstellen (HTML5-Übung)_HTML5-Tutorial-FähigkeitenNächster Artikel：CSS3-Transformation 3D Verwenden Sie CSS3, um einen dynamischen 3D-Würfel zu erstellen (HTML5-Übung)_HTML5-Tutorial-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen