Bonjour à tous,
J'ai fait un "petit" javascript qui me permet de faire du drag and drop entre les lignes d'un tableau et entre deux tableaux.
Ca marche bien, à un problème près...
Lorsque je déplace mes lignes, j'aimerais qu'elles soient constamment au dessus des autres (pour qu'on les voient)
Je pensais donc utiliser la propriété z-index (.style.zindex en js) pour affecter une valeur faible aux lignes que je survole et une valeur élevée pour la ligne que je déplace.
Hors dans tous les cas, la ligne est au dessus des lignes précédentes et en dessous des lignes suivantes (comme si le z-index suivait le numéro de ligne du tableau) et le z-index n'y fait rien.
C'est mon code où c'est simplement qu'on ne peut pas affecter de z-index sur un tr (je déplace un tr en entier) ??
Merci d'avance pour tous les avis éclairés
++
Forum Programmation.web z-index des tr
17
mar.
2005
# Ce serait beaucoup plus facile de tester avec un lien
Posté par Cali_Mero . Évalué à 2.
[^] # Re: Ce serait beaucoup plus facile de tester avec un lien
Posté par CrEv (site web personnel) . Évalué à 1.
Pas de lien, c'est en local, désolé...
Navigateurs : firefox et ie (donc je pense que le prob est ailleur)
Je vais essayer d'expliquer plus précisément le comportement que j'attend
Imaginez une playliste : on a un ensemble de lignes contenant diverses informations.
Quand on déplace l'une des lignes, elle passe "au dessus" des autres (ie elle est visible et les lignes en dessous ne le sont pas forcément)
(en gros quand une ligne est déplacée son z-index dépasse celui de n'importe quelle ligne)
Maintenant le truc c'est que je veux réaliser qqch de semblable en version web.
J'arrive sans problème à déplacer des lignes dans un tableau, mais la ligne que je déplace ne se trouve pas au dessus de toutes les autres.
Il semblerait que son z-index corresponde au numéro de la ligne
Par exemple si je déplace la première ligne, durant son déplacement elle sera tout le temps visible
Si par contre je déplace une ligne au milieu : si je la monte elle sera au dessus des autres lignes du tableau. Si je la descend, elle sera en dessous et donc sera invisible.
Je suis désolé, c'est pas super simple à expliquer comme vision, mais le problème est en fait simplement de savoir si le z-index peut s'appliquer à des < tr >
(je sais, sans exemple c'est pas très compréhensible, j'essairai d'en poser un sur le net dès que je le pourrai)
[^] # Re: Ce serait beaucoup plus facile de tester avec un lien
Posté par fabien . Évalué à 0.
comment ca tu deplace ? deja il faudrait expliquer ceci, parceque depalcer des ligne de tableau (TR) dans une page web, je ne vois pas trop.
donne des details (mode operatoire : "je clique" ici etc..) on pourra comprendre, parceque là, c'est pas mieux.
[^] # Re: Ce serait beaucoup plus facile de tester avec un lien
Posté par Amand Tihon (site web personnel) . Évalué à 2.
Il n'est pas interdit non plus de lire la question avant de hurler.
Si tu regardes bien, il explique tout ça de manière assez claire juste après avoir dit bonjour.
[^] # Re: Ce serait beaucoup plus facile de tester avec un lien
Posté par fabien . Évalué à 2.
donc oui le coups de la play list je vois bien ce que c'est mais, avec un exemple de code (comme il l'a fait) c'est mieux pour comprendre, voilà, c'est tout.
PS : je n'hurlais pas j'etais hyper surpris (ben ouais je ne savais pas qu'on pouvais faire celà, j'ai appris qqchose) je vais jetter un coups d'oeuil a ce code en detail :)
[^] # Re: Ce serait beaucoup plus facile de tester avec un lien
Posté par CrEv (site web personnel) . Évalué à 1.
http://www.walterzorn.com/dragdrop/dragdrop_e.htm(...)
Mon code ne provient pas de là (la lib fait ds les 1400 lignes de javascript) mais son code est très facile à intégrer
Y'a d'autres codes qui trainent sur le net, mais faut chercher pas mal (et aussi ne serai-ce qu'avoir l'idée, y'a deux jours encore j'aurais jamais pensé faire du drag and drop dans une page web ;-) )
Pour l'exemple, j'essairai de poser mon code entier dans pas trop longtemps, ou on a vraiment des lignes de tableau qui bougent ... :-)
[^] # Re: Ce serait beaucoup plus facile de tester avec un lien
Posté par CrEv (site web personnel) . Évalué à 1.
Oui je déplace des lignes, exactement comme décrit, comme dans une playlist, ou n'importe quel logiciel contenant des tableaux et des lignes qu'on peut déplacer
J'ai un tableau contenant mes lignes que je veux déplacer
<table>
<tr>
<th></th>
<th></th>
</tr>
<tr id="cont0" style="position:absolute" onmousedown="javascript:clickdown(0)" onmouseup="javascript:clickup()">
<td></td>
<td></td>
</tr>
<tr id="fake0">
<td></td>
<td></td>
</tr>
<tr id="cont1" style="position:absolute" onmousedown="javascript:clickdown(1)" onmouseup="javascript:clickup()">
<td></td>
<td></td>
</tr>
<tr id="fake1">
<td></td>
<td></td>
</tr>
<tr id="cont2" style="position:absolute" onmousedown="javascript:clickdown(2)" onmouseup="javascript:clickup()">
<td></td>
<td></td>
</tr>
<tr id="fake2">
<td></td>
<td></td>
</tr>
</table>
Ici les <tr> ayant pour id 'cont*' contienent le contenu réel de ma ligne
Les 'fake*' sont la uniquement pour que le tableau ait la bonne taille car le position:absolute fait que les lignes sont l'une au dessus de l'autre
Quand on clique sur une des lignes on execute clickdown avec comme paramètre le numéro de la ligne à bouger.
Une procédure javascript est exécutée à chaque mouvement de la souris. Initialisation :
if (navigator.appName.substring(0,3) == "Net") document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = mousemove;
Donc lorsqu'on clique sur une ligne, on fait la fait bouger :
// on récupère l'élement :
o = document.getElementById("cont"+i);
setPosition(o, e.clientX, e.clientY) // e = window.event;
setPosition est comme suit :
function setPosition(o,oLeft,oTop) {
setLeft(o,oLeft)
setTop(o,oTop)
}
function setLeft(o,oLeft) {
o.style.left = oLeft + "px"
}
function setTop(o,oTop) {
o.style.top = oTop + "px"
}
Donc, voici le déplacement d'une ligne (en gros...)
Maintenant le problème :
Si je clique sur le ligne 2 (cont1)
Je peux donc la déplacer, et je la monte au dessus de la ligne 1 (cont0) -> ça marche, la ligne est bien au dessus (en z)
Si par contre je la descend sur la ligne 3 (cont2) -> la ligne se trouve sous cont2 et donc ce que je déplac eest invisible
Et je n'arrive pas, même en forcant les z-index quand je déplace à avoir toujours ma ligne au dessus
Pour les z-index :
je fais un :
document.getElementById(id_de_la_ligne_que_je_bouge).style.zindex = 100;
et sur les autres :
document.getElementById(autres_ids).style.zindex = 1;
Mais ça n'y fait rien, comme si autre chose surchargeait les z-index ou comme si les <tr> n'y avaient pas droit...
(ce n'est pas un problème d'accès au css de la ligne car j'arrive à changer le background des lignes que je survol)
Voilà, si j'ai oublié des choses, si c'est pas totalement clair, n'hésitez pas, je redétaillerai encore, y'a pas de prob
[^] # Re: Ce serait beaucoup plus facile de tester avec un lien
Posté par fabien . Évalué à 2.
J'ai jeté un coups d'oeuil a ton code (qui fera donc moins de 37ko)... mais que je n'arrive pas a faire bien marcher :
sous firefox, rien ne bouge, sous IE ca bouge mais seulement quand je clique, plus qund je deplace, (de quelques pixels)
bon, c'est normal il manque quelques fonction, dont clickup et mousemove, peux tu donner ton code fonctionel, tel qu'il est maintenant ?
Je ne garantie pas que je trouve qqchose, mais ca me ferait gagner du temps en debuggage pour en arriver a ton niveau.
merci.
[^] # Re: Ce serait beaucoup plus facile de tester avec un lien
Posté par CrEv (site web personnel) . Évalué à 1.
Le code que j'ai en ce moment fait dans les 250 lignes de javascript et permet de faire du drag and drop entre deux tableaux et au sein d'un tableau
Normalement c'est sencé marcher sous ie et firefox.
mousemove s'occupe de déplacer les élements (avec le setPosition) si un booléen (drag) est à vrai
clickdown met le booléen à vrai, clickup a faux pour arreter le déplacement
J'espère que ça t'aide un peu, je détaillerai un peu plus lundi
Sinon, j'ai rajouté des trucs du genre transparence de la ligne déplacée, bords magnétiques pour un meilleur placement, ...
Mais je n'ai toujours pas réussi à régler le problème du z-index sur mes tr que je déplace...
[^] # Re: Ce serait beaucoup plus facile de tester avec un lien
Posté par fabien . Évalué à 1.
placer un div ou un layer dans tes tr et y mettre le contenu dedans.
Je ne sais pas du tout si ca peux marcher, je dis a a tout hazard...
Je suis vraiment curieux de voir ton code :)
[^] # Re: Ce serait beaucoup plus facile de tester avec un lien
Posté par CrEv (site web personnel) . Évalué à 1.
Comme promis, voici un code exemple :
http://vega.winsos.net/drag/test.php?n=3&v0=plop&v1=Blurp&a(...)
Pour le fonctionnement :
- on peut prendre des élements du premier tableau et les glisser dans le second
- on peut déplacer les élements entre eux dans le dexième tableau pour les changer de place
Tu comprendra rapidement le problème des z-index sur les tr...
J'ai essayé avec les divs mais je n'ai pas toujours le comportement voulu
Désolé mais le serveur est lent, c'est normal ;-)
Le fichier est en php, mais c'est seulement pour récupérer les paramètres...
Le code est par contre un peu crade et i reste des bugs, j'ai fait ça rapidement a des fins de tests
++
[^] # Re: Ce serait beaucoup plus facile de tester avec un lien
Posté par fabien . Évalué à 1.
J'ai trouvé un petit workaround a ton probleme, bon c'est pas genial, mais au lieu de changer le background, j'ai utilisé
.style.visibility="hidden";
et voilà, ca marche... bon, du coups plus trop besoin d'opacity.. mais plus de probleme de z-index :)
bon, j'ai just testé ca en quelques minutes, si je trouve mieux, je te dis.
[^] # Re: Ce serait beaucoup plus facile de tester avec un lien
Posté par CrEv (site web personnel) . Évalué à 1.
Ca résoud pas totalement mais c'est cool
Si tu as d'autres questions / améliorations je suis tout ouïe (oups, aurtaugrafe ??)
Suivre le flux des commentaires
Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.