1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
|
function drag(event){
var html = event.dataTransfer.getData("text/html");
if("" == html)
{
event.dataTransfer.setData("text/plain", "<div id=\""+event.target.id+"\" class=\"droppedElement\" onclick=\"remove(this)\">" +
event.target.innerHTML + "</div>");
actualId = event.target.id;
}
}
function dragEnd(event){
/*
* Si l'élément a été laché sur la zone on le supprime sinon
* On lui rend sa couleur d'origine
*/
if(dnd_successful)
event.target.parentNode.removeChild(event.target);
dnd_successful = false;
}
function dragEnter(event){
/*
* On survole notre dépôt, je colore le dépôt en gris clair pour indiquer à
* l'utilisateur qu'il peut lâcher ici.
*/
if(event.target.innerHTML != ""){
event.target.style.background = "#CCCCCC";
event.dataTransfer.dropEffect = "move";
event.preventDefault();
}
}
function dragleave(event){
/* L'utilisateur quitte le dépôt, on repasse sur un fond blanc. */
event.target.style.background = old_background;
}
function allowDrop(event){
event.preventDefault();
return false;
}
function drop(event){
var dest = document.getElementById("dropzone");
var html = event.dataTransfer.getData("text/html");
if("" != html)
{
dest.style.background = "white";
}
else
{
// on valide le déplacement est ajoute l'élément dans la dropzone
var span = document.createElement("span");
span.innerHTML = event.dataTransfer.getData("text/plain");
dest.appendChild(span);
event.target.style.background = old_background;
dnd_successful = true;
}
event.preventDefault();
} |
Partager