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.
HTML :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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);
Partager