Forum Programmation.web z-index des tr

Posté par  (site web personnel) .
Étiquettes : aucune
0
17
mar.
2005
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

++
  • # Ce serait beaucoup plus facile de tester avec un lien

    Posté par  . Évalué à 2.

    Tu ne donnes pas de lien, pas la source, pas le navigateur et une description assez vague du problème : difficile de t'aider.
    • [^] # Re: Ce serait beaucoup plus facile de tester avec un lien

      Posté par  (site web personnel) . Évalué à 1.

      désolé, je pensais que c'était suffisament clair

      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  . Évalué à 0.

        tu deplace ????
        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  (site web personnel) . Évalué à 2.

          tu deplace ????
          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.


          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  . Évalué à 2.

            ouais, j'ai lu la question, mais excuse moi, c'est pas tres courant (d'ailleur si vous avez uen url ou on peux voir un truc qui marche comme ca sur internet je susi prenneur, c'est interressant)
            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  (site web personnel) . Évalué à 1.

              Voici un petit lien d'une lib permettant de faire du drag and drop + resize en html + javascript :
              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  (site web personnel) . Évalué à 1.

          OK, je vais détailler encore un peu plus alors (et j'essairai bientôt de poser un petit exemple)

          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  . Évalué à 2.

            d'abord, merci pour ton lien http://www.walterzorn.com/dragdrop/dragdrop_e.htm(...) c'est tres interressant (mais ca fait 37k de javascript..)
            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  (site web personnel) . Évalué à 1.

              J'ai pas mon code avec moi ce week-end mais je vais essayer d'écrire une petite démo et je poserai peut-être ça ici ou dans un journal (selon le résultat de la démo...)

              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  . Évalué à 1.

                une petite idée au passage que j'aurai aimer tester :
                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  (site web personnel) . Évalué à 1.

                  Hello !!

                  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  . Évalué à 1.

                    C'est bien ton truc, j'aime bien.

                    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.

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.