[API HTML5] Drag 'n' Drop HTML5

Bonjour,

J'essaye actuellement de faire un Drag and Drop. Malheureusement (pour moi ^^), lorsque je drop un élément dans ma zone, il s'affiche en un grand nombre qui varie aléatoirement (je crois).

Je détaille :

-je drag un élément (une img) qui vient d'un Table

- ma zone Drop est une section vide : juste un cadre au centre de ma page

-il est exposé un problème de multiaffichage dans le cours mais c'est lorsque qu'on drag sur un élément qui a été déjà droppé, mon problème apparaît dès le 1er Drag and Drop

Je vous transmets ma structure de code ci-dessous.

Mon Javascript en 1er

Puis mon code HTML.

Je débute dans le Javascript. J'espère que vous pourrez m'aider.

En espérant que vous pourrez m'éclairer...
Merci d'avance. :D

HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<section id="dropper" class="dropper">
</section>
<section>
<table>
 <tr>
 <td ><div><img src="a.png" alt="A" class="icone draggable" draggable=false></div>A<td/>
 <td ><div><img src="b.png" alt="B" class="icone draggable" draggable=false></div>B<td/>
 <tr/>
 <tr>
 <td class="draggable"><img src="a.png" alt="A" class="icone" draggable=false>A<td/>
 <td class="draggable"><img src="b.png" alt="B" class="icone" draggable=false>B<td/>
 <tr/>
 <tr>
 <td class="draggable"><img src="a.png" alt="A" class="icone" draggable=false>A<td/>
 <td class="draggable"><img src="b.png" alt="B" class="icone" draggable=false>B<td/>
 <tr/>
 <tr>
 <td class="draggable"><img src="a.png" alt="A" class="icone" draggable=false>A<td/>
 <td class="draggable"><img src="b.png" alt="B" class="icone" draggable=false>B<td/>
 <tr/>
</table>
</section>

Javascript :

Code:

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
function  applyDragEvents(element){
    element.draggable=true;
    element.addEventListener('dragstart', function(e) {
            draggedElement = e.target; // On sauvegarde l'élément en cours de déplacement
            draggedElement.style.backgroundColor='transparent';
            e.dataTransfer.setData('text/plain', element.alt); 
        }, false);
}
 
function applyDropEvents(dropper){
    dropper.addEventListener('dragover', function(e) {
        e.preventDefault(); // On autorise le drop d'éléments            
    }, false);
    dropper.addEventListener('drop', function(e) {
        //cellule grisée et plus possible de la dragger
        var target=e.target;
        while(target.className.indexOf('dropper') == -1) { // Cette boucle permet de remonter jusqu'à la zone de drop parente
        target = target.parentNode;
        }draggedElement.parentNode.parentNode.style.backgroundColor='grey';      
        draggedElement.draggable=false;     
        var text =e.dataTransfer.getData('text/plain');
        //élmnt cloné et ajout à la zone de drop
        var clonedElt=draggedElement.parentNode.cloneNode(true);
        clonedElt=target.appendChild(clonedElt);
        text= document.createTextNode(text);
        clonedElt.appendChild(text);
        /* clonedCell.style.position='absolute';  */
 }, false);
}
/*Application*/
var draggedElement=null;
 var elementsDraggable = document.querySelectorAll('.draggable');
 var elementDropper=  document.querySelector('.dropper');
 corpsOnglet.addEventListener('mouseover', function (e){
    for(i=0; i<elementsDraggable.length; i++){
        /* elementsDraggable[i].addEventListener('click', function (e){ */
            applyDragEvents(elementsDraggable[i]);  
        /* },false); */
    }
    applyDropEvents(elementDropper);
},true);