Bonjour, ca fait maintenant quelque temps que je m'arrache les cheveux avec ca. Je viens donc quérir un peu d'aide sur le fofo
J'ai un système permettant de drag'n'drop une div d'un container à un autre (Un container "items disponibles" et un "items sélectionnés")
Dans chacune de ces div j'ai une image (<IMG>) "float right" avec une fleche servant a deplacer la div d'un container à l'autre sans drag dropé.
Je change l'orientation de cette fleche (gauche ou droite) quand on change la div de container.
Une image un peu plus parlante:
a droite les colonnes selectionnées.
Les image de fleches vers la droite sont celles ou le callback ne marche pas
J'ai un callback sur onDblClick de la div
et un autre sur le onClick de l'img:
Coté HTML:
Coté JS:
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 <DIV class="DContainer" id="DContainerAvail" overclass="O_DContainer" align="center"> <DIV class="DBox" overClass="O_DBox" dragClass="D_DBox" selected="0" id="Item19" onDblClick="Node_Action('Item19')" > <IMG src="/plop/btn_right.gif" style="float:right;cursor:default;" class="DragIcon" title="Déplacer" onClick="Node_Action('Item19')">Nom de l item selectionnable </DIV> </DIV> <DIV class="DContainer" id="DContainerSelec" overclass="O_DContainer" align="center"> <DIV class="DBox" overClass="O_DBox" dragClass="D_DBox" selected="1" id="Item20" onDblClick="Node_Action('Item20')" > <IMG src="/plop/btn_left.gif" style="float:right;cursor:default;" class="DragIcon" title="Déplacer" onClick="Node_Action('Item20')">Nom de l item selectionné </DIV> </DIV>
Sous firefox ça marche niquel comme d'habitude
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 function Node_Action(ItemID) { var elmNode = document.getElementById(ItemID); if (elmNode != null) { if(elmNode.getAttribute("selected") == "1") { elmNode.parentNode.removeChild(elmNode); elDragContainerAvail.appendChild(elmNode); elmNode.setAttribute('selected', "0"); elmNode.innerHTML = elmNode.innerHTML.replace("btn_left.gif", "btn_right.gif"); } else { elmNode.parentNode.removeChild(elmNode); elDragContainerSelec.appendChild(elmNode); elmNode.setAttribute('selected', "1"); elmNode.innerHTML = elmNode.innerHTML.replace("btn_right.gif", "btn_left.gif"); } } SortAvail(); }
Sous IE les div dans la colonne "items selectionnables" ont leurs callbacks sur l'image (onClick="Node_Action(ID)") qui ne marchent pas, cad on ne rentre pas dans la fonction (Le dbl click sur la div marche par contre).
Quant aux div sélectionnées leurs callbacks onclick sur l'image fonctionnent. Les seules choses qui changent entre les deux étant le rootNode (==Container) et la src de l'img ("btn_right.gif "pour l'un et "btn_left.gif" pour l'autre)
J'ai cherché sur google et je suis tombé sur une histoire de "Bubble Events" mais si j'ai bien compris ca devrait quand meme rentrer dans ma fonction de callback.
Merci infiniment pour votre aide.
-- Jeremy
Partager