Partage
  • Partager sur Facebook
  • Partager sur Twitter

Calque/Div déplaçable

Problème d'intégration

Anonyme
    30 octobre 2006 à 10:53:36

    Bonjour :)

    Je suis en train de créer un design pour un site et j'aimerais savoir comment faire pour que mes divs soient déplaçables.
    Vous allez certainement me dire:
    Va chercher sur Google !

    Ca, c'est déjà fait. Sauf que je n'arrive pas à l'intégrer à mon code.
    Voici le code:
    <div class="cadre">
    <h3><a href="javascript:DivStatus( 'mondiv', '2' )" class="more">x/+</a>Serveurs<br /></h3>
    <div id="mondiv2">
    <ul>
       <li><a href="ut1.php" class="se">Serveur UT2004 #1 <span>ut2004://xxx.xxx.xxx.xxx:7777 (xxx,xxxx)</span></a></li>
       <li><a href="ut2.php" class="se">Serveur UT2004 #2 <span>ut2004://xxx.xxx.xxx.xxx:7777(xXXX,xxxx,xx,xx,xxx,xxxxx,xx,xxx,xxxx,xx)</span></a></li>
       <li><a href="ut3.php" class="se">Serveur UT2004 #3 <span>ut2004://xxx.xxx.xxx.xxx:7577 (xxx) xxx</span></a></li>
    </ul>
    </div>
    </div>

    Je veux que le <div class="cadre"> soit déplaçable.

    Si possible...



    J'aimerais bien (si possible) que mon div soit déplaçable uniquement dans le div "menu" (le div menu contient tous mes div cadre)

    Merci d'avance :)
    À bientôt !
    • Partager sur Facebook
    • Partager sur Twitter
      30 octobre 2006 à 14:23:15

      Déplaçable à l'infini, ou bien quelques configurations spécifiques?

      Si tu sais d'avance les positions du div déplaçables, tu crées autant de codes de menu que de positions du div possibles, et tu n'en affiche qu'un seul en fonction des conditions que tu définiras.

      Maintenant, si tout les div doivent bouger, si il existe des centaines d'ordres possibles de tes div, oublie cette solution...
      • Partager sur Facebook
      • Partager sur Twitter
      Anonyme
        30 octobre 2006 à 15:36:18

        Je veux dire déplaçable comme le drag and drop !
        • Partager sur Facebook
        • Partager sur Twitter
          30 octobre 2006 à 15:37:33

          Ouh la...
          Tu sais programmer en flash? Je vois pas d'autre solution sinon...
          • Partager sur Facebook
          • Partager sur Twitter
          Anonyme
            30 octobre 2006 à 16:11:55

            On est pas obligé...
            http://www.google.fr/ig -> pas de flash :p
            • Partager sur Facebook
            • Partager sur Twitter
              30 octobre 2006 à 16:14:00

              Oui javascript aussi... mais je suis nul en javascript alors j'y pense jamais :)
              • Partager sur Facebook
              • Partager sur Twitter
                2 novembre 2006 à 19:47:41

                J'avais fait un petit script JS il y a quelques temps pour faire ça, très léger :


                <script>
                        var deplacement = false;
                        var decalX,decalY, numwin, numwinwindow;
                        var windowinf = new Array;



                        function appeldeplace(divid)
                        {
                                deplacement=true;
                                numwinwindow=divid;
                                var objet = document.getElementById(divid);
                                cx=objet.offsetLeft;
                                cy=objet.offsetTop;
                                decalX=event.clientX-cx;
                                decalY=event.clientY-cy;

                                document.onmousemove=deplace;
                                document.onmouseup=findeplace;
                        }

                       
                       
                        function deplace()
                        {
                                if(deplacement==true)
                                {
                                        divid=numwinwindow;
                                       
                                        var objet = document.getElementById(divid);
                                        objet.style.left=event.clientX-decalX+"px";
                                        objet.style.top=event.clientY-decalY+"px";
                                }   
                        }

                       
                       
                        function findeplace()
                        {
                                deplacement=false;
                        }
                </script>


                Et pour l'appeler c'est comme ça :

                <div id='toto'  onmousedown="appeldeplace('toto');" style='left:0px;top:0px;'>
                Blabla
                </div>


                Voila, j'espère avoir pu t'aider !
                • Partager sur Facebook
                • Partager sur Twitter

                Calque/Div déplaçable

                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                • Editeur
                • Markdown