Html5 implementiert das Ziehen und Ablegen von Bildern zwischen zwei div-Elementen

Html5 implementiert das Ziehen und Ablegen von Bildern zwischen zwei div-Elementen_html5-Tutorial-Tipps

WBOY

Freigeben： 2016-05-16 15:49:51

Original

1796 Leute haben es durchsucht

Originaleffekt

Der Effekt nach dem Ziehen

Der Code lautet wie folgt

Code kopieren

Der Code lautet wie folgt:

[Code]

functionallowDrop (ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev. target.id );
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target .appendChild(document.getElementById(data));
}

< ;/body>

[/code]
Es sieht vielleicht etwas kompliziert aus, aber wir können die verschiedenen Teile des Drag & Drop studieren Veranstaltung separat buchen.

Element als ziehbar festlegen

Um das Element ziehbar zu machen, setzen Sie zunächst das ziehbare Attribut auf true:

Kopieren Sie den Code Der Code lautet wie folgt:

Was zu ziehen ist – ondragstart und setData()

Geben Sie dann an, was passiert, wenn das Element gezogen wird.

Im obigen Beispiel ruft das Attribut ondragstart eine Funktion auf, Drag(

event), die die zu ziehenden Daten angibt.

Die Methode dataTransfer.setData() legt den Datentyp und den Wert der gezogenen Daten fest:

Code kopierenDer Der Code lautet wie folgt:

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

In diesem Beispiel ist der Datentyp „Text“ und der Wert ist die ID des ziehbaren Elements („drag1“).
Wohin mit

- ondragover

Das ondragover-Ereignis gibt an, wo die gezogenen Daten platziert werden sollen.

Standardmäßig können Daten/Elemente nicht in anderen Elementen platziert werden. Wenn wir die Platzierung zulassen müssen, müssen wir die Standardbehandlung des Elements verhindern.

Dies geschieht durch Aufrufen der Methode

event.preventDefault() des ondragover-Ereignisses:

Code kopierenDer Code lautet wie folgt:

event.preventDefault()

zum Platzieren - Ondrop

Wenn die gezogenen Daten abgelegt werden, tritt das Drop-Ereignis auf.

Im obigen Beispiel ruft das ondrop-Attribut eine Funktion auf, drop(

event):

Code kopieren Der Code lautet wie folgt:

function drop(ev)
{
ev.preventDefault(
var data=ev.dataTransfer.getData( "Text");
ev.target.appendChild(document.getElementById(data)}

Code-Erklärung:

Rufen Sie PreventDefault() auf, um die Standardverarbeitung von Daten durch den Browser zu vermeiden (das Standardverhalten des Drop-Ereignisses besteht darin, es als Link zu öffnen) und die gezogenen Daten über die Methode dataTransfer.getData("Text") abzurufen. Diese Methode gibt jeden Datensatz in den gleichen Typ wie in der setData()-Methode zurück. Die gezogenen Daten sind die ID des gezogenen Elements („drag1“). Hängen Sie das gezogene Element an das platzierte Element (Zielelement) an