evento ondrop

/ * Cuando el arrastre del gatillo * /
document.addEventListener ( "dragstart", function (event) {
//dataTransfer.setData método () para establecer el tipo de datos y los datos de arrastre
event.dataTransfer.setData ( "Texto", event.target.id);
// Salida un poco de texto mientras se arrastra elemento p
. Document.getElementById ( "demo") innerHTML = "empiece a arrastrar elemento p.";
// Modificar la transparencia del elemento de arrastre
event.target.style.opacity = "0.4";
});
// P elemento de arrastre, al mismo tiempo, cambiar el color del texto de salida
document.addEventListener ( "arrastre", function (event) {
. Document.getElementById ( "demo") style.color = "red";
});
// Salida Fin p elemento al arrastrar algunos elementos de texto y restablecer la transparencia
document.addEventListener ( "dragend", function (event) {
. Document.getElementById ( "demo") innerHTML = "elemento de arrastre completa p";
event.target.style.opacity = "1";
});
/ * Después de la finalización de la resistencia de disparo * /
// Completar el elemento de arrastre cuando p entrar dropTarget, estilos de borde cambian div
document.addEventListener ( "dragenter", function (event) {
si (== event.target.className "dropTarget") {
event.target.style.border = "red de puntos 3px";
}
});
// Por defecto, los datos / elementos no pueden ser arrastrados y colocados en otros elementos. En la caída Debemos evitar que los elementos de procesamiento predeterminado
document.addEventListener ( "dragover", function (event) {
event.preventDefault ();
});
// Cuando arrastrar y soltar los elementos p dejan dropTarget, restablecer div estilos de borde
document.addEventListener ( "DragLeave", function (event) {
si (== event.target.className "dropTarget") {
event.target.style.border = "";
}
});
/ * Para soltar, prevenir navegador procesamiento de datos por defecto (en el enlace de caída está activada por defecto)
Restablecer la salida de color y color del borde del texto de la DIV
Utilizar los datos método dataTransfer.getData () para conseguir cayó
Identificación del elemento de datos de la fregona ( "drag1")
Elementos adicionales del elemento de arrastrar y soltar * /
document.addEventListener ( "drop", function (event) {
event.preventDefault ();
si (== event.target.className "dropTarget") {
document.getElementById ( "demo") style.color = ".";
event.target.style.border = "";
var data = event.dataTransfer.getData ( "Texto");
event.target.appendChild (document.getElementById (datos));
}
});