Kommentar: Es war schon immer das, was Internetnutzer sehen möchten, ob sie JavaScript nicht verwenden, um Drag & Drop -Effekt zu erzielen. Heute hat HTML5 als nächstes eine detaillierte Einführung an Sie durchgeführt. Freunde, die wissen müssen, können sich darauf beziehen.
In der Webentwicklung müssen wir JavaScript verwenden, um Drag & Drop-Effekt zu erzielen. Lassen Sie es heute mit HTML5 implementieren:
Schauen wir uns zuerst den Core -HTML -Code an:
<div>
<p> Ziehen Sie kleine gelbe Quadrate in einen großen roten Box </p> </p>
</div>
<div draggable = "true">
</div>
<div>
</div>
Die draggierbare Eigenschaft wird von HTML5 neu hinzugefügt. Es hat drei Werte: wahr, falsch, automatisch. wahr ist gezogen, falsch ist nicht erlaubt. Auto hängt davon ab, ob der Browser des Benutzers es unterstützt. Weitere Informationen finden Sie in der offiziellen Dokumentation.
Fügen Sie einen kleinen Stil hinzu:
<style type = "text/css">
#fallen
{
Breite: 300px;
Höhe: 200px;
Hintergrundfarbe: #ff0000;
Polsterung: 5px;
Grenze: 2PX Solid #000000;
}
#Artikel
{
Breite: 100px;
Höhe: 100px;
Hintergrundfarbe: #ffff00;
Polsterung: 5px;
Rand: 20px;
Grenze: 1PX gestrichelt #000000;
}
*[draggable = true] {
-moz-user-Select: Keine;
-khtml-User-Draag: Element;
Cursor: Bewegung;
}
*:-khtml-draag {
Hintergrundfarbe: RGBA (238.238.238, 0,5);
}
</style>
Dann schauen wir uns JavaScript an:
Funktion HörenEvent (EventTarget, EventType, EventHandler) {
if (eventTarget.addeventListener) {
EventTarget.AdDeVentListener (EventType, EventHandler, False);
} else if (eventTarget.attachEvent) {
EventType = "on" + EventType;
EventTarget.attachEvent (EventType, EventHandler);
} anders {
eventTarget ["on" + eventType] = eventHandler;
}
}
// Ereignis abbrechen
Funktion CancelEvent (Ereignis) {
if (event.preventDefault) {
Event.PreventDefault ();
} anders {
Ereignis.ReturnValue = false;
}
}
// Ausbreitung abbrechen
Funktion CancelPropagation (Ereignis) {
if (Event.StopPropagation) {
Event.StopPropagation ();
} anders {
event.cancelBubble = true;
}
}
window.onload = function () {
var target = document.getElementById ("Drop");
HörenEvent (Ziel, "Dragenter", CancelEvent);
HörenEvent (Ziel, "Dragover", Dragover);
HörenEvent (Ziel, "Drop", Funktion (evt) {
CancelPropagation (EVT);
evt = evt || Fenster.Event;
evt.datatransfer.dropeffect = 'copy';
var id = evt.datatransfer.getData ("text");
target.AppendChild (document.getElementById (id));
});
var item = document.getElementById ("item");
item.SetAttribute ("draggierbar", "wahr");
HörenEvent (Element, "Dragstart", Funktion (evt) {
evt = evt || Fenster.Event;
evt.datatransfer.effectallowed = 'copy';
evt.datatransfer.setData ("text", item.id);
});
};
Funktion dragover (evt) {
if (evt.preventDefault) evt.preventDefault ();
evt = evt || Fenster.Event;
evt.datatransfer.dropeffect = 'copy';
false zurückgeben;
}
Aus dem obigen Code betrachten wir Drag & Drop -Ereignisse mithilfe eines Satzes von HTML5 und direkt auf Folgendes:
Dragstart
Drag Event beginnt.
ziehen
Während des Luftwiderstands.
Dragenter
Drag ist über dem Ziel; Wird verwendet, um festzustellen, ob das Ziel einen Tropfen akzeptiert.
Dragover
Drag ist über das Ziel; Wird verwendet, um das Feedback für den Benutzer zu bestimmen.
fallen
Tropfen tritt auf.
Dragleave
Ziehen Sie das Ziel von Blättern.
Dragend
Ziehenbetrieb endet.
Definieren Sie verwandte Ereignisse, um die gewünschte Funktion zu implementieren. Das obige JS ist nicht schwer zu verstehen.
Sie können es selbst ausprobieren. Derzeit unterstützt es das Beste in der Oper, aber der IE -Effekt ist nicht gut.
Ich hoffe, es wird für Ihre Webentwicklung hilfreich sein.