Bonjour,
J'ai en javascript un menu avec sous-menu, je suis en train de concevoir un mode qui permet de personnaliser son menu à l'aide de drag'n'drop des éléments.
J'ai actuellement codé le système à la "netvibes", pour comprendre, rendez vous sur netvibes.com, créer des onglets avec le petit +, et faites des drag'n'drop des onglets.
J'ai conçu le même système pour mon menu, mais vient le problème des sous-menu.
Comment placer un menu top level dans un sous menu ?
Le problème rencontré est au niveau conception.
Voyons le menu suivant :
|---1---|---2---|---3---|
L'élément 2 à un sous-menu, je commence à drag'n'drop l'élément 1 vers la droite. J'ai donc l'élément 1 sous la souris, et son "ghost" (la futur place de l'élément) à sa place :
|-------|---2---|---3---|
Je déplace l'élément 1 vers la droite sur l'élément 2 pour déployer le sous-menu. Mais alors le résultat donne :
|---2---|---3---|
|---a---|
|-------|
|---b---|
Vu que le ghost, n'est plus à la place 1, car il se trouve dans le sous-menu, ça décale tout les éléments à gauche.
Et la souris avant ce décalage était dans la colonne 2, se retrouve dans la colonne 3, vu que tout s'est décalé à droite.
Donc la souris n'est plus dans le sous-menu de 2, et on ne peut donc plus choisir à quel endroit du sous menu on l'insère.
Comment je peux procéder pour éviter ce genre de soucis et avoir une manière agréable et propre de faire du drag'n'drop même dans le sous-menu ?
pas sûr d avoir tout compris (je me suis un peu paumé à la fin
)
et pas sûr de bien faire comprendre mon idée
mais bon
quand tu drag Menu1 sur le menu 2 ou ses sous menus, il doit y avoir un sacré binz en css qui fait faire au navigateur un tas de calcul et "oublie" l'origine de menu1
tu n'as pas dit quel type de balise tu utilisais mais en logique ça devrait marcher avec tout
à mon sens, il faut séparer le draggable du dropable
<div class="drop">
<div class="drag>Menu 1</div>
</div>
si tu fixe la taille des div.drop , l espace ne disparaitra pas
dans mon idée, quand tu drop, il te suffirait alors de rajouter un événement qui provoque la suppresion du div.drop origine de menu1
attention cependant à un truc avec le drag/drop sur ie (6 et 7), ça peut laguer fort et je n ai pas encore compris pourquoi
j'utilisais une arborescence dynamique de ul/li pour l'équivalent de menu; sous menu, sous sous menu ....
Je vais bientôt m y remettre et je teste justement des sujets de ce type (séparer le drag du drop) me disant que le lag est peut être du à des problèmes d'ie de s'y retrouver lorsque le dom est perturbé par tous ces changements mais bon pas de preuve
(j utilise proto + script aculous mais j ai vu le même lag avec mootools dans un exemple sur le net qui utilisait la même arborescence ul / li / ul / li ...)
Attention, il n'y a pas du tout de problème de programmation, pas de bug.
C'est parfaitement logique ce qu'il se passe.
J'explique d'une autre façon :
|---1---|---2---|---3---|
Je commence à déplacer 1, il se trouve sous ma souris, il disparaît donc du menu et on a :
|---2---|---3---|
Tous les éléments se sont décalés vers la gauche vu que 1 n'existe plus, c'est logique et pas un bogue.
Mais dans un premier temps ça n'est pas ce qu'il se passe, vu que j'ai un Ghost qui indique la futur place de l'élément (comme sur Netvibes), donc quand je commence à drag le 1 ça donne ça :
|-------|---2---|---3---|
Car vu que je viens à peine de déplacer 1, le Ghost est à la place de 1.
Si je décale 1 jusqu'au 2/3 de 2 j'obtiens :
|---2---|-------|---3---|
Donc à chaque fois ça déplace les éléments, et c'est logique.
Maintenant admettons que je veuille mettre 1 dans le sous-menu de 2.
Au début j'ai :
|-------|---2---|---3---|
_______|---a---|
_______|---b---|
Puis la souris est entre a et b, donc la futur place de 1 est entre a et b, donc le Ghost se déplace à cette position.
Mais en se déplaçant à cette position, il n'est plus à l'ancienne position de 1, et donc du coup ça décale 2 et 3 vers la gauche. En se décalant le sous-menu n'est plus sous la souris.
J'ai mieux expliqué le problème ?
Pour informations complémentaires, le Ghost est un élément li créé dynamiquement à la bonne place dans la liste, tandis que l'élément que je déplace, qui est aussi un élément li, passe en position absolue pour sortir du flux.
justement la que se trouve ton erreur, met plutôt un clone pour garder a la fois la position de depart et celle d'arrivé ainsi plus de décalage.
J'avais eu le même problème pour une liste sortable a multiple niveaux.
C'est une des solutions à laquelle j'ai pensé. Mais de prime abord je ne trouve pas ça très sexy.
Si vous avez une idée plus "intéressante" je suis à l'écoute
Ben tu sais le web c'est le web, si tu clones pas, tu supprimes
Après libre a toi de cloner quelque chose de moins visible pour convenir a tes besoins.
Pas sexy dans le sens où ça ne correspond pas trop à l'esprit du drag'n'drop. Ca fait bizarre de garder un clône au départ et à l'arrivé, aucune interface fait comme ça. Ca va perturber l'utilisateur.
Je ne parlais pas de "pas sexy" niveau technique, mais bien au niveau de la perception des choses par l'utilisateur.
Et ces interfaces ont le même problème, sorti du flux, décalage des autres éléments.
Quand je te dis de cloner quelques chose de plus visible, c'est simplement un bloc, pas forcement visible, aux mêmes dimensions, ou grisé..
En tant qu'utilisateur, ça ne me choque pas que :
En voulant déplacer un menu, ça ne chamboule pas tous les autres menu pendant l'opération.
Si en plus le menu se grise au moment où je clique, et que mon curseur "traine" une sorte de bloc translucide pendant toute la durée où je garde mon bouton appuyé, ça serait même vachement ergonomique.
Bref, voici une vue utilisateur ... j'ai pas compris la partie technique (bon, j'ai lu en diagonale et j'ai fais aucun effort ... j'attends qu'un de mes scripts au boulot plante pour pouvoir analyser le bug ... j'ai donc la tête ailleurs
)
kéké