ondrag Veranstaltung

/ * Wenn der Trigger für Drag * /
document.addEventListener ( "drag", Funktion (event) {
//dataTransfer.setData () -Methode den Datentyp und ziehen Daten einstellen
event.dataTransfer.setData ( "Text", event.target.id);
// Ausgabe einen Text beim Ziehen p Element
( "Demo") document.getElementById innerHTML- = "beginnen p Element ziehen..";
Ändern Sie die Transparenz des Schleppelements //
event.target.style.opacity = "0.4";
});
// P Schleppelement zur gleichen Zeit, ändern die Farbe der Textausgabe
document.addEventListener ( "ziehen", Funktion (event) {
( "Demo") document.getElementById style.color = "red".
});
// Ende p Element Ausgabe beim Ziehen einige Textelemente und Reset-Transparenz
document.addEventListener ( "dragend", Funktion (event) {
( "Demo") document.getElementById innerHTML- = "complete p drag Element.";
event.target.style.opacity = "1";
});
/ * Nach Beendigung des Schlepp Trigger * /
Füllen Sie das Schleppelement // wenn p eingeben Droptarget, Rahmenarten ändern div
document.addEventListener ( "dragenter", function (event) {
if (event.target.className == "Droptarget") {
event.target.style.border = "3px gepunkteten rot";
}
});
// Standardmäßig Daten / Elemente können nicht in andere Elemente per Drag & Drop. Bei der Fall müssen wir Standardverarbeitungselemente verhindern
document.addEventListener ( "dragover", Funktion (event) {
Event.preventDefault ();
});
// Wenn Drag & Drop die p Elemente Droptarget verlassen, Reset div-Stile Grenze
document.addEventListener ( "Dragleave", Funktion (event) {
if (event.target.className == "Droptarget") {
event.target.style.border = "";
}
});
/ * Für Drop Standardverarbeitung Datenbrowser verhindern (in der Drop-Link ist standardmäßig aktiviert)
Zurücksetzen Ausgangsgrenzfarbe und Textfarbe des DIV
Verwenden Sie dataTransfer.setData () -Methode, um fallen gelassen Daten erhalten
Mop Datenelement-ID ( "drag1")
Zusätzliche Elemente zum Drag & Drop-Element * /
document.addEventListener ( "drop", Funktion (event) {
Event.preventDefault ();
if (event.target.className == "Droptarget") {
document.getElementById ( "Demo") style.color = ".";
event.target.style.border = "";
var data = event.dataTransfer.getData ( "Text");
event.target.appendChild (document.getElementById (Daten));
}
});