• [^] # Re: Ce serait beaucoup plus facile de tester avec un lien

    Posté par (site web personnel) . En réponse au message z-index des tr. É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