Kommentar: Rufen Sie PreventDefault () auf, um die Standardverarbeitung von Daten durch den Browser zu vermeiden (das Standardverhalten von Drop -Ereignissen wird in Linkform geöffnet) und die gezogenen Daten werden über die Methode DataTransfer.getData (Text) erhalten. Interessierte Freunde können sich darauf beziehen.
Ursprünglicher Effekt
Effekt nach dem Ziehen
Der Code ist wie folgt
[Code]
<! DocType html>
<html>
<kopf>
<style type = "text/css">
#Div1, #Div2
{float: links; Breite: 100px; Höhe: 35px; Rand: 10px; Padding: 10px; Grenze: 1px solide #aaaaa;}
</style>
<script type = "text/javaScript">
Funktion degfrop (ev)
{
Ev.PreventDefault ();
}
Funktion Drag (ev)
{
ev.datatransfer.setData ("text", ev.target.id);
}
Funktionsabfall (ev)
{
Ev.PreventDefault ();
var data = ev.datatransfer.getData ("text");
ev.target.appendchild (document.getElementById (data));
}
</script>
</head>
<body>
<img src = "/i/w3school_logo_black.gif" draggable = "true" ondagstart = "Drag (Ereignis)"/>
<div ondrop = "Drop (Ereignis)" ONDRAGOVER = "ERGEBNUNG (Ereignis)">
</div>
<div ondrop = "Drop (Ereignis)" ONDRAGOVER = "ERGEBNUNG (Ereignis)"> </div>
</body>
</html>
[/Code]
Es mag etwas kompliziert erscheinen, aber wir können die verschiedenen Teile des Drag & Drop -Ereignisses separat untersuchen.
Setzen Sie Elemente für Drag-and-Drop
Um das Element draggierbar zu machen, stellen Sie zunächst die draggierbare Eigenschaft auf true:
<img draggable = "true" />
Was zu ziehen - Ondragstart und SetData ()
Geben Sie dann an, was passiert, wenn das Element gezogen wird.
Im obigen Beispiel ruft die OneDragstart -Eigenschaft eine Funktion auf, Drag (Ereignis), die die zugezogenen Daten angibt.
Die DataTransfer.setData () -Methode legt den Datentyp und den Wert der gezogenen Daten fest:
Funktion Drag (ev)
{
ev.datatransfer.setData ("text", ev.target.id);
}
In diesem Beispiel ist der Datentyp Text und der Wert ist die ID des Draggable -Elements (Drag1).
Wo man setzen kann - ONDRAGOVER
Das ONDRAGOVER -Ereignis gibt an, wo gezogene Daten platziert werden sollen.
Standardmäßig können Daten/Elemente nicht in andere Elemente platziert werden. Wenn Sie festlegen müssen, müssen wir die Standardhandhabung von Elementen blockieren.
Dies erfolgt durch die Aufzeichnung des Ereignisses.PreventDefault () -Methode des Ondragover -Ereignisses:
Event.PreventDefault ()
Platzierung vornehmen - ONDROP
Ein Drop -Ereignis tritt auf, wenn Dropdaten platziert werden.
Im obigen Beispiel ruft die ONDROP -Eigenschaft eine Funktion ab, Drop (Ereignis):
Funktionsabfall (ev)
{
Ev.PreventDefault ();
var data = ev.datatransfer.getData ("text");
ev.target.appendchild (document.getElementById (data));
}
Code Erläuterung:
Rufen Sie PreventDefault () auf, um die Standardverarbeitung von Daten durch den Browser zu vermeiden (das Standardverhalten von Drop -Ereignissen wird in Linkform geöffnet), um die gezogenen Daten über die Methode DataTransfer.getData (Text) zu erhalten. Diese Methode gibt jeden Datensatz in der Methode setData () auf denselben Typ zurück. Die gezogenen Daten sind die ID des gezogenen Elements (Drag1) an, das das gezogene Element zum Placement -Element (Zielelement) annimmt