In dem Inhalt dieses Artikels geht es darum, wie die HTML -Element -Drag -Funktion in HTML5/"> HTML5 implementiert werden kann. Um Drag & Drop vor HTML5 zu implementieren, müssen Sie JS verwenden. Jetzt unterstützt HTML5 Drag & Drop -Funktion intern, aber um etwas komplexere Funktionen zu implementieren, ist JS nicht mehr.
1. Erstellen Sie ein Drag -ObjektWir können den Browser über das draggable Attribut erkennen, das Elemente zur Implementierung der Drag & Drop -Funktion benötigen. Draggierbar hat drei Werte: TRUE: Das Element kann gezogen werden; Falsch: Das Element kann nicht gezogen werden; AUTO: Der Browser bestimmt, ob das Element selbst gezogen werden kann.
Der Standardwert des Systems ist automatisch, aber der Browser unterstützt bei auto unterschiedlicher Drag & Drop -Funktionen verschiedener Elemente, wie z. B. IMG -Objekte, unterstützt jedoch keine Div -Objekte. Wenn Sie also ein Element ziehen müssen, ist es am besten, Draggale auf True zu setzen. Schauen wir uns ein Beispiel unten an:
<! DocType html>
<html>
<kopf>
<title> Beispiel </title>
<Styles>
#SRC> *
{
float: links;
}
#Target, #src> img
{
Rand: dünnes, festes Schwarz;
Polsterung: 2px;
Rand: 4px;
}
#Ziel
{
Höhe: 123px;
Breite: 220px;
Text-Align: Mitte;
Anzeige: Tabelle;
}
#Target> p
{
Anzeige: Tabellenzelle;
vertikaler Align: Mitte;
}
#Target> img
{
Rand: 1PX;
}
</style>
</head>
<body>
<div id = "src">
<img draggable = "true" id = "car1" src = "img /1.jpg" />
<img draggable = "true" id = "car2" src = "img /2.jpg" />
<img draggable = "true" id = "car3" src = "img /3.jpg" />
<div id = "target">
<p id = "msg">
Lassen Sie hier </p> abfallen </p>
</div>
</div>
<Script>
var src = document.getElementById ("src");
var target = document.getElementById ("Ziel");
</script>
</body>
</html>
Laufeffekt:
2. Handle Drag & Drop -EreignisseLassen Sie uns nun die Ereignisse im Zusammenhang mit dem Ziehen verstehen. Es gibt zwei Arten von Ereignissen, eine ist das Ereignis des Drag -Objekts und der andere das Ereignis des Drop -Bereichs. Drag -Ereignisse umfassen: Dragstart: Ausgelöst, wenn Element Drag startet; Ziehen: während des Elements ausgelöst; Dragend: Ausgelöst, wenn Element Drag endet. Nehmen wir unten ein Beispiel:
<! DocType html>
<html>
<kopf>
<title> Beispiel </title>
<Styles>
#SRC> *
{
float: links;
}
#Target, #src> img
{
Rand: dünnes, festes Schwarz;
Polsterung: 2px;
Rand: 4px;
}
#Ziel
{
Höhe: 123px;
Breite: 220px;
Text-Align: Mitte;
Anzeige: Tabelle;
}
#Target> p
{
Anzeige: Tabellenzelle;
vertikaler Align: Mitte;
}
#Target> img
{
Rand: 1PX;
}
img.dragged
{
Hintergrundfarbe: Orange;
}
</style>
</head>
<body>
<div id = "src">
<img draggable = "true" id = "car1" src = "img /1.jpg" />
<img draggable = "true" id = "car2" src = "img /2.jpg" />
<img draggable = "true" id = "car3" src = "img /3.jpg" />
<div id = "target">
<p id = "msg">
Lassen Sie hier </p> abfallen </p>
</div>
</div>
<Script>
var src = document.getElementById ("src");
var target = document.getElementById ("Ziel");
var msg = document.getElementById ("msg");
src.ondragstart = function (e) {
E.Target.ClassList.Add ("gezogen");
}
src.ondragend = function (e) {
E.Target.ClassList.remove ("gezogen");
msg.innerhtml = "Drop hier";
}
src.ondrag = function (e) {
msg.innerhtml = e.target.id;
}
</script>
</body>
</html>
Laufeffekt:
3. Erstellen Sie einen LieferbereichSchauen wir uns Ereignisse im Zusammenhang mit dem Lieferbereich an: Dragenter: Ausgelöst, wenn das Drag -Objekt in den Lieferbereich eintritt. Dragover: Ausgelöst, wenn sich das Drag -Objekt im Lieferbereich bewegt; Dragleave: Das Drag -Objekt wird nicht an den Lieferbereich geliefert und ausgelöst, wenn der Lieferbereich verlässt. Drop: Ausgelöst, wenn das Drag -Objekt in den Lieferbereich platziert wird.
Schauen wir uns ein Beispiel an:
<! DocType html>
<html>
<kopf>
<title> Beispiel </title>
<Styles>
#SRC> *
{
float: links;
}
#Target, #src> img
{
Rand: dünnes, festes Schwarz;
Polsterung: 2px;
Rand: 4px;
}
#Ziel
{
Höhe: 123px;
Breite: 220px;
Text-Align: Mitte;
Anzeige: Tabelle;
}
#Target> p
{
Anzeige: Tabellenzelle;
vertikaler Align: Mitte;
}
#Target> img
{
Rand: 1PX;
}
img.dragged
{
Hintergrundfarbe: Lightgrey;
}
</style>
</head>
<body>
<div id = "src">
<img draggable = "true" id = "car1" src = "img /1.jpg" />
<img draggable = "true" id = "car2" src = "img /2.jpg" />
<img draggable = "true" id = "car3" src = "img /3.jpg" />
<div id = "target">
<p id = "msg">
Lassen Sie hier </p> abfallen </p>
</div>
</div>
<Script>
var src = document.getElementById ("src");
var target = document.getElementById ("Ziel");
var msg = document.getElementById ("msg");
var draggedid;
target.ondragenter = HandledRag;
target.onondRagover = HandledRag;
Funktion HandleDRag (e) {
E.PreventDefault ();
}
target.ondrop = function (e) {
var newelem = document.getElementById (draggedid) .clonenode (false);
target.innerhtml = "";
Target.AppendChild (NewLem);
E.PreventDefault ();
}
src.ondragstart = function (e) {
draggedid = e.target.id;
E.Target.ClassList.Add ("gezogen");
}
src.ondragend = function (e) {
var elems = document.querySelectorAll (". Ziehen");
für (var i = 0; i <elems.length; i ++) {
Elems [i] .ClassList.remove ("gezogen");
}
}
</script>
</body>
</html>
Auslaufergebnisse:
4. Verwenden Sie DatatransferWir verwenden DataTransfer, um Daten von Drag -Objekten an den Zustellbereich zu übergeben. Datatransfer hat die folgenden Eigenschaften und Methoden: Typen: Return das Format der Daten; getData (<format>): Gibt die angegebenen Formatdaten zurück; setData (<format>, <daten>): Legt die angegebenen Formatdaten fest; ClearData (<Format>): Entfernt die angegebenen Formatdaten; Dateien: Gibt das Dateiarray zurück, das geliefert wurde.
Schauen wir uns das folgende Beispiel an, den Effekt, den es erreicht hat, ist der gleiche wie Beispiel 3:
<! DocType html>
<html>
<kopf>
<title> Beispiel </title>
<Styles>
#SRC> *
{
float: links;
}
#src> img
{
Rand: dünnes, festes Schwarz;
Polsterung: 2px;
Rand: 4px;
}
#Ziel
{
Rand: dünnes, festes Schwarz;
Rand: 4px;
}
#Ziel
{
Höhe: 123px;
Breite: 220px;
Text-Align: Mitte;
Anzeige: Tabelle;
}
#Target> p
{
Anzeige: Tabellenzelle;
vertikaler Align: Mitte;
}
img.dragged
{
Hintergrundfarbe: Orange;
}
</style>
</head>
<body>
<div id = "src">
<img draggable = "true" id = "car1" src = "img /1.jpg" />
<img draggable = "true" id = "car2" src = "img /2.jpg" />
<img draggable = "true" id = "car3" src = "img /3.jpg" />
<div id = "target">
<p id = "msg">
Lassen Sie hier </p> abfallen </p>
</div>
</div>
<Script>
var src = document.getElementById ("src");
var target = document.getElementById ("Ziel");
target.ondragenter = HandledRag;
target.onondRagover = HandledRag;
Funktion HandleDRag (e) {
E.PreventDefault ();
}
target.ondrop = function (e) {
var dropedid = e.datatransfer.getData ("text");
var newelem = document.getElementById (fallengelassen) .Clonenode (false);
target.innerhtml = "";
Target.AppendChild (NewLem);
E.PreventDefault ();
}
src.ondragstart = function (e) {
e.Datatransfer.setData ("text", e.target.id);
E.Target.ClassList.Add ("gezogen");
}
src.ondragend = function (e) {
var elems = document.querySelectorAll (". Ziehen");
für (var i = 0; i <elems.length; i ++) {
Elems [i] .ClassList.remove ("gezogen");
}
}
</script>
</body>
</html>
5. Ziehen Sie die Datei ab und lassen Sie sie fallenHTML5 unterstützt die Datei -API, mit der wir lokale Dateien manipulieren können. Im Allgemeinen verwenden wir die Datei -API nicht direkt. Wir können es in Kombination mit anderen Merkmalen verwenden, z. B. das Kombinieren von Drag & Drop -Effekten, wie im folgenden Beispiel gezeigt:
<! DocType html>
<html>
<kopf>
<title> Beispiel </title>
<Styles>
Körper> *
{
float: links;
}
#Ziel
{
Grenze: Medium Double Black;
Rand: 4px;
Höhe: 75px;
Breite: 200px;
Text-Align: Mitte;
Anzeige: Tabelle;
}
#Target> p
{
Anzeige: Tabellenzelle;
vertikaler Align: Mitte;
}
Tisch
{
Rand: 4px;
Grenzkollapse: Zusammenbruch;
}
th, td
{
Polsterung: 4px;
}
</style>
</head>
<body>
<div id = "target">
<p id = "msg">
Löschen Sie Dateien hier </p>
</div>
<table id = "data">
</table>
<Script>
var target = document.getElementById ("Ziel");
target.ondragenter = HandledRag;
target.onondRagover = HandledRag;
Funktion HandleDRag (e) {
E.PreventDefault ();
}
target.ondrop = function (e) {
var files = e.datatransfer.files;
var tableelem = document.getElementById ("Daten");
tableelem.innerhtml = "<tr> <Th> Name </th> <Th> Typ </th> <Th> Größe </th> </tr>";
für (var i = 0; i <files.length; i ++) {
var row = "<tr> <td>" + Dateien [i] .Name + "</td> <td>" + Dateien [i] .Type + "</td> <td>" + Dateien [i] .Size + "</td> </tr>";
tableelem.innerhtml += row;
}
E.PreventDefault ();
}
</script>
</body>
</html>
Datatransfer gibt ein filelistisches Objekt zurück, das wir als Dateiarray -Objekt behandeln können, und die Datei enthält die folgenden Eigenschaften: Name: Dateiname; Typ: Dateityp (MIME -Typ); Größe: Dateigröße.
Laufeffekt:
6. Dateien hochladenDas Folgende ist ein Beispiel für das Hochladen von Dateien durch Ziehen und Löschen von AJAX.
<! DocType html>
<html>
<kopf>
<title> Beispiel </title>
<Styles>
.Tisch
{
Anzeige: Tabelle;
}
.Reihe
{
Anzeige: Tabellenreihe;
}
.Zelle
{
Anzeige: Tabellenzelle;
Polsterung: 5px;
}
.Etikett
{
Text-Align: Recht;
}
#Ziel
{
Grenze: Medium Double Black;
Rand: 4px;
Höhe: 50px;
Breite: 200px;
Text-Align: Mitte;
Anzeige: Tabelle;
}
#Target> p
{
Anzeige: Tabellenzelle;
vertikaler Align: Mitte;
}
</style>
</head>
<body>
<form id = "fruchtform" methode = "post" action = "/uploadHandler.ashx">
<div>
<div>
<div>
Bananen: </div>
<div>
<Eingabe name = "bananas" value = "2" /> < /div>
</div>
<div>
<div>
Äpfel: </div>
<div>
<input name = "apples" value = "5" /> < /div>
</div>
<div>
<div>
Kirschen: </div>
<div>
<Eingabename = "Cherries" value = "20" /> < /div>
</div>
<div>
<div>
Datei: </div>
<div>
<Eingabe type = "Datei" name = "Datei" /> < /div>
</div>
<div>
<div>
Gesamt: </div>
<div id = "Ergebnisse">
Elemente </div>
</div>
</div>
<div id = "target">
<p id = "msg">
Löschen Sie Dateien hier </p>
</div>
<Button ID = "Senden" Typ = "Senden">
Formular </button> reichen
</form>
<script type = "text/javaScript">
var target = document.getElementById ("Ziel");
var httprequest;
var filelist;
target.ondragenter = HandledRag;
target.onondRagover = HandledRag;
Funktion HandleDRag (e) {
E.PreventDefault ();
}
target.ondrop = function (e) {
filelist = e.datatransfer.files;
E.PreventDefault ();
}
document.getElementById ("subieren"). Onclick = Function adButtonpress (e) {
E.PreventDefault ();
var form = document.getElementById ("fruitform");
var formdata = new FormData (Form);
if (filelist) {
für (var i = 0; i <filelist.length; i ++) {
FormData.Append ("Datei" + i, filelist [i]);
}
}
httprequest = new xmlhttprequest ();
httprequest.onReadyStatechange = Handlesponse;
httprequest.open ("Post", Form.Action);
httprequest.send (FormData);
}
Funktion Handlesponse () {
if (httprequest.readystate == 4 && httprequest.status == 200) {
var data = json.Parse (httprequest.responsetext);
document.getElementById ("Ergebnisse"). Innerhtml = "Sie haben" + data.total + "Elemente";
}
}
</script>
</body>
</html>
Wirkung:
Einige der oben genannten Beispiele haben möglicherweise unterschiedliche Browser -Laufeffekte. Ich benutze einen Chrombrowser. Mit Ausnahme von Beispielen 5 und 6, die nicht mehrere Dateien unterstützen, werden andere Beispiele normal ausgeführt. Sie können die Demo herunterladen.
Demo -Download -Adresse: html5guide.draggable.rar