événement ondragenter

/ * Lorsque la traînée déclencheur * /
document.addEventListener ( "dragstart", function (event) {
//dataTransfer.setData () pour définir le type de données et de traînée
event.dataTransfer.setData ( "Text", event.target.id);
// Sortie du texte tout en faisant glisser l'élément de p
. Document.getElementById ( "demo") innerHTML = "commencez à faire glisser l'élément de p.";
// Modifier la transparence de l'élément de traînée
event.target.style.opacity = "0.4";
});
// P élément de glisser en même temps, changer la couleur de sortie de texte
document.addEventListener ( "drag", function (event) {
. Document.getElementById ( "demo") style.color = "red";
});
// Sortie Fin de l'élément de p lorsque vous faites glisser certains éléments du texte et de réinitialiser la transparence
document.addEventListener ( "dragend", function (event) {
. Document.getElementById ( "demo") innerHTML = "élément de traînée p complète";
event.target.style.opacity = "1";
});
/ * Après l'achèvement de la traînée déclencheur * /
// Terminer l'élément de glisser lorsque p entrer dropTarget, styles de bordure changent div
document.addEventListener ( "dragenter", function (event) {
if (event.target.className == "dropTarget") {
event.target.style.border = "pointillé rouge 3px";
}
});
// Par défaut, les données / éléments ne peuvent pas être glissés et déposés dans d'autres éléments. Chute Nous devons empêcher les éléments de traitement par défaut
document.addEventListener ( "dragover", function (event) {
event.preventDefault ();
});
// Quand glisser-déposer les éléments p laissent dropTarget, réinitialiser div styles de bordure
document.addEventListener ( "DragLeave", function (event) {
if (event.target.className == "dropTarget") {
event.target.style.border = "";
}
});
/ * Pour déposer, empêcher navigateur de données de traitement par défaut (dans le lien de chute est activé par défaut)
Remise de la sortie couleur de la bordure et la couleur du texte de la DIV
Utiliser les données dataTransfer.getData () méthode pour obtenir chuté
élément de données Mop id ( "drag1")
Des éléments supplémentaires à l'élément de chute de glisser * /
document.addEventListener ( "drop", function (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 (données));
}
});