Partage
  • Partager sur Facebook
  • Partager sur Twitter

[js]drag and drop...

et 1 autre question ^^

    27 août 2006 à 19:56:21

    Bonjour à tous et à toutes !

    après 1 heure de recherches sur differents éditeur javascript, je n'ai plus le choix, je viens vous demander

    1ere question :

    Comment fait t'on pour déplacer des images et pour enregistrer leur position ? ( un peu comme sur le bureau de windows ^^ )


    2eme question :

    Comment fait t'on pour que dès qu'un element est ajouté dans une bdd php la page s'actualise toute seule ( surement Ajax je pense :euh: )


    Et c'est tout :p

    Merci de votre future aide

    a+

    EDIT : je me suis mal exprimer ?
    • Partager sur Facebook
    • Partager sur Twitter
      27 août 2006 à 21:39:03

      Pour le drag en drop, il faut positionner l'élément ( un div par exemple) en mode absolue ( position: absolute; en css).
      Puis modifier les propriété css top et left grâce à javascript pour déplacer la fenêtre à l'endroit voulu.
      Quand on veut placer cette fenêtre avec la souris (cas du drag & drop), il faut connaitre les coordonnées de la souris (x et y) pour les mettre dans top et left.

      Bon plutôt qu'un long discours ( jcrois que tlm dort déjà), un lien que j'ai trouvé avec une (très) brève recherche:
      lien en question.

      En réalité, la page s'actualise toute seule à intervalle réguliers (par exemple toute les 10 secondes), mais pas immédiatement au moment où on insère quelque chose dans la bdd.(edit, ça cette phrase elle vient après)

      Pour la seconde question, il y a des sujets du même type sur ce forum (celui là par exemple).

      En réalité, la page s'actualise toute seule à intervalle réguliers (par exemple toute les 10 secondes), mais pas immédiatement au moment où on insère quelque chose dans la bdd.

      edit: pourquoi celà ?
      • Partager sur Facebook
      • Partager sur Twitter
        27 août 2006 à 22:14:51

        merci

        le premier lien je l'avais trouvé, mais je n'ai pas compris, je suis une vrai daube en php

        le 2eme lien je ne l'avais pas vu, mais j'ai lu le tuto sur xmlHttpRequest ( que je n'ai pas compris non plus :p )
        sinon pour le drag and drop c'est pas grave ^^

        mais c'est surtout l'actualisation

        j'ai fait un truc avec la balise meta, mais il faut que ca recharge les images et c'est moche =/

        moi je voudrais le faire en js ;)

        donc voilà, si tu as compris, c'est que t'es fort ^^

        merci et a+
        • Partager sur Facebook
        • Partager sur Twitter
          27 août 2006 à 22:37:01

          Citation : dark.link

          merci
          le premier lien je l'avais trouvé, mais je n'ai pas compris, je suis une vrai daube en php


          Heuresement que c'est pas du php mais du javascript :D

          Pour l'actualisation, disons déjà que tu fais une fonction javascript qui actualise une zone de page

          function actualiser()
          {
                  /**Code de base pour ajax*/
                  var xhr; // on déclare l'instance
                  if (window.XMLHttpRequest) xhr = new XMLHttpRequest(); // Firefox, Opera, Konqueror, Safari, ...
                  else if (window.ActiveXObject) xhr = new ActiveXObject('Microsoft.XMLHTTP'); // Internet Explorer
                  else return; // Navigateur ancien
                  /*Fin du code de base qu'il est inutile de chercher à comprendre*/

                  xhr.open("GET","Tonfichier.php",true); //On va ouvrir Tonfichier.php
                  xhr.onreadystatechange  = function ()
                  {
                          if( xhr.readyState      ==    4   && xhr.status       ==     200) //Quand la page est reçue
                          {
                                  document.getElementById('A_Actualiser').innerHTML = xhr.responseText;   //Actualise une zone de la page (qui s'appele A_Actualiser)
                          }
                  }
                  xhr.send(null)//Envoi la requête
          }


          Une requête ajax assez banale. Au moment où les données sont reçues, on les mets dans la page grâce à document.getElementById('A_Actualiser').innerHTML = ...;

          Cet élément qui s'appele A_Actualiser, c'est un <div> de ta page qui va contenir le texte à actualiser:

          <div id="A_Actualiser">
          le texte affiché ici va changer à chaque appel de la fonction actualiser()
          </div>


          Maintenant, coté php, le javascript ouvre une page appelée "Tonfichier.php":

          header('Cache-Control: no-cache, must-revalidate'); //A utiliser pour éviter les problèmes de cache avec internet explorer
          header('Content-type: text/html; charset=iso-8859-1'); //Autre problèmes, pour éviter les erreurs d'encodage de caractères

          //Place ensuite le code qui doit apparaitre à l'intérieur du div
          //par exemple
          echo time();


          Dernière chose, pour que la fonction actualiser() fonctionne réellement et soit appelée à intervalle réguliers, il faut utiliser setInterval:

          setInterval(actualiser, 2000); //2000 ms = 2 secondes


          Mais c'est plus détaillé dans le tuto o_O
          • Partager sur Facebook
          • Partager sur Twitter
            27 août 2006 à 22:54:01

            whaou merci

            demain je teste tout ca :D

            pour :

            Heuresement que c'est pas du php mais du javascript

            heureuseument que je suis meilleur en php que je ne le suis en javascript :p

            pour :

            setInterval(actualiser, 2000); //2000 ms = 2 secondes

            je le met ou o_O ?

            merci et a+
            • Partager sur Facebook
            • Partager sur Twitter
              28 août 2006 à 2:28:33

              Salut, alors voilà pour ton premier problème je viens de faire ça vite fait donc c'est pas forcément parfait mais c'est toujours une base:
              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
              <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
                      <head>
                              <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                              <title>Déplacer un block en JS</title>
                              <style type="text/css">
                                      body
                                      {
                                              margin: 0px;
                                              padding: 0px;
                                             
                                              background-image: url(./fond.jpg);
                                              background-position: top left;
                                              background-repeat: repeat;
                                             
                                              font-size: 0.7em;
                                              font-family: Verdana, Arial, "Arial Black", "Times New Roman", Times, serif;
                                             
                                              text-align: center;
                                      }
                                     
                                      div#menu
                                      {
                                              margin: 10px 1% 20px 10px; /* top right bottom left */
                                              padding: 0px 0px 0px 0px;
                                             
                                              width: 12%;
                                             
                                              text-align: left;
                                             
                                              float: left;
                                      }
                                     
                                      h4#titre_id
                                      {
                                              margin: 0px 0px 0px 0px;
                                              padding: 5px 0px 0px 10px;
                                             
                                              height: 18px;
                                             
                                              background-image: url("./subtitle.png");
                                              background-position: top left;
                                              background-repeat: repeat-x;
                                             
                                              border: 1px solid #000000;
                                             
                                              font-size: 1em;
                                              color: #000000;
                                      }
                                     
                                      ul#ul_id
                                      {
                                              margin: 0px 0px 20px 0px;
                                              padding: 10px 10px 10px 20px;
                                             
                                              background-color:#EEF3FF;
                                             
                                              border: 1px solid #000000;
                                              border-top: none;
                                             
                                              list-style-type: none;
                                             
                                              text-indent: -10px;
                                      }
                                     
                                      a, a:active, a:visited
                                      {
                                              text-decoration: none;
                                              color: #1E4162;
                                             
                                              font-weight: bold;
                                      }
                                     
                                      a:hover
                                      {
                                              color: #000000;
                                              text-decoration: underline;
                                      }
                              </style>
                              <script type="text/javascript" src="js.js"></script>
                      </head>
                      <body>
                              <div id="menu">
                                      <h4 id="titre_id">Menu 1</h4>
                                      <ul id="ul_id">
                                              <li><a href="#" title="Lien 1">Lien 1</a></li>
                                              <li><a href="#" title="Lien 2">Lien 2</a></li>
                                              <li><a href="#" title="Lien 3">Lien 3</a></li>
                                              <li><a href="#" title="Lien 4">Lien 4</a></li>
                                              <li><a href="#" title="Lien 5">Lien 5</a></li>
                                      </ul>
                              </div>
                             
                              <div id="info" style="
                                                                              margin: 10px 0px 0px 0px;
                                                                              border: 1px solid black;
                                                                              background-color: #CCCCCC;
                                                                              color: #FF0000;
                                                                              font-weight: bold;
                                                                              width: 150px;
                                                                              text-align: center;
                                                                              float: left;
                                                                         "
              >

                                      &nbsp;
                              </div>
                      </body>
              </html>


              var clic = false;
              var layerX = null;
              var layerY = null;

              window.onload = function ()
              {
                      document.getElementById('menu').onmousedown = Temp;
                      document.getElementById('menu').onmouseup = Reset;
              }

              function Temp (e)
              {
                      clic = true;
                      if (typeof document.selection != 'undefined') //Pour IE
                      {
                              layerX = window.event.offsetX;
                              layerY = window.event.offsetY;
                      }
                      else
                      {
                              layerX = e.layerX;
                              layerY = e.layerY;
                      }
                      document.getElementById('menu').onmouseup = Reset;
                      document.getElementById('menu').onmousemove = AffCoord;
              }
              function AffCoord (e)
              {
                      if (clic)
                      {
                              if (typeof document.selection != 'undefined') //Pour IE
                              {
                                      var posX = window.event.clientX;
                                      var posY = window.event.clientY;
                              }
                              else
                              {
                                      var posX = e.pageX;
                                      var posY = e.pageY;
                              }
                             
                              var modX = posX - layerX;
                              var modY = posY - layerY;
                              document.getElementById('info').innerHTML = 'Layer: ' + layerX + '/' + layerY + '<br />Pos: ' + posX + '/' + posY + '<br />Mod: ' + modX + '/' + modY;
                              document.getElementById('menu').style.position = 'absolute';
                              document.getElementById('menu').style.top = modY + 'px';
                              document.getElementById('menu').style.left = modX + 'px';
                      }
              }
              function Reset ()
              {
                      clic = false;
                      document.getElementById('info').innerHTML = '&nbsp;';
              }


              Bon alors j'ai pas commenté mais la seule "difficulté" était de pensé à placer son block en fonction de la position de la souris (pour avoir tout les mouvements simplement).
              Donc tu lis tout ça et tu va voir sur le net la déscription des fonctions que tu ne connait pas se seras largement suffisant.

              Sinon pour ton deuxième problème je pense que tu dois bien réfléchir à l'utilité d'un tel script car ça va pas mal pompé, le problème de la gestion de ton "évènement" c'est qu'il est "côté serveur", donc tu dois forcément le contacter et ça c'est plus lent que du JS, voilà donc je voulais juste le préciser que tu pèse le pour et le contre.

              Au revoir.
              • Partager sur Facebook
              • Partager sur Twitter
                29 août 2006 à 9:12:16

                salut,

                le seul truc c'est que je connais RIEN en javascript ( enfin si : alert('Bonjour'); ^^ )

                mais un truc :

                <div class="cadre">
                <img src="images/blabla1.png" />
                </div>

                <p />

                <div class="cadre">
                <img src="images/blabla2.png" />
                </div>

                <p />

                <div class="cadre">
                <img src="images/blabla3.png" />
                </div>

                <p />

                <div class="cadre">
                <img src="images/blabla4.png" />
                </div>


                comment je fais pour appliquer le truc que tu as fait ?

                merci

                a+
                • Partager sur Facebook
                • Partager sur Twitter
                  2 septembre 2006 à 14:32:44

                  Hors sujet :
                  <p />, ça n'existe pas.
                  Une image s'insère toujours dans un <p> ;)
                  • Partager sur Facebook
                  • Partager sur Twitter

                  Ancien validateur du SdZ.

                    2 septembre 2006 à 22:23:22

                    Apparament tu ne touches aussi pas en xhtml. :o
                    • Partager sur Facebook
                    • Partager sur Twitter

                    http://www.encheres-cents.com - http://www.checkmycomposer.com

                      10 septembre 2006 à 13:29:16

                      C'est sûrement une erreur d'étourderie :p Nan ?
                      • Partager sur Facebook
                      • Partager sur Twitter

                      [js]drag and drop...

                      × 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