J'abandonne ...

Signaler
Messages postés
514
Date d'inscription
mercredi 19 mars 2003
Statut
Membre
Dernière intervention
1 mars 2009
-
Messages postés
514
Date d'inscription
mercredi 19 mars 2003
Statut
Membre
Dernière intervention
1 mars 2009
-
Salut à tous,
Voilà, j'ai un script qui permet de selectionner, à l'aide de la souris, le plus simplement possible une partie d'une image, pour qu'ensuite elle soit traitée en PHP, mais la n'est pas la question ...
Bref, la selection se fait comme un banal drag & drop, par l'intermédiaire d'une balise div, mais une fois que l'on veut redéplacer celle-ci alors qu'elle a déjà été déplacée, la balise se remet dans sa position initial.
Un exemple plus clair, là : http://centromere.free.fr/DragDropCutter.html et un zip à télécharger ici pour avoir tout ici : http://centromere.free.fr/DragDropCutter.zip... C'est plus simple.
Si quelqu'un peut m'aider, je le remercie, parce que, moi, j'abandonne, j'en ai marre, je comprends pas.
LocalStone :big)

7 réponses

Messages postés
419
Date d'inscription
dimanche 31 août 2003
Statut
Membre
Dernière intervention
19 avril 2010
1
salut,

partie modifiée (pas sûr que cela resolve ton prob ... )

         function MoveCutter()
         {
            oCutter = document.getElementById('CutterBox');
            // oImg = document.getElementById('ImgBox');                     // oté
            oCutter.style.top = GetCutterTop() + 'px';
            oCutter.style.left = GetCutterLeft() + 'px';
            // oImg.style.top = - GetCutterTop() - parseInt(oCutter.currentStyle.borderWidth) + 'px';        // oté
            // oImg.style.left = - GetCutterLeft() - parseInt(oCutter.currentStyle.borderWidth) + 'px';         // oté
            return;
         }
         function MoveImg()
         {
         //   oImg = document.getElementById('ImgBox');               // oté
            oCutter = document.getElementById('CutterBox');
         //   oImg.style.top = - GetCutterTop() + 'px';                          // oté
         //  oImg.style.left = - GetCutterLeft() + 'px';                           // oté
            oCutter.style.top = - GetCutterTop() + 'px';                      // ajouté
            oCutter.style.left = - GetCutterLeft() + 'px';                       // ajouté
            return;
         }



++

L.
Messages postés
290
Date d'inscription
jeudi 26 août 2004
Statut
Membre
Dernière intervention
25 avril 2008

Je me suis deja fait avoir avec ce genre de chose, le probleme c'est la position absolue du calque.
tu peut l'incrementer, la reduire, lu affecter une valeur, mais pas la lire...
J'ai donc detourne le probleme de la lecture de la position en incrementant une variable de la meme manire que le calque, en meme temps..

c'est pas la solution directe mais je pense que ca va t'aider..
Messages postés
290
Date d'inscription
jeudi 26 août 2004
Statut
Membre
Dernière intervention
25 avril 2008

Inspire toi de cet exemple aussi :
drap-drop
Messages postés
514
Date d'inscription
mercredi 19 mars 2003
Statut
Membre
Dernière intervention
1 mars 2009

Bah merci, je vais étudier ça cet après-midi. Merci merci !
Juste un p'tit truc, tu peux lire la position, mais en fait, il ne faut pas faire :
xPos = oObject.style.left; //par exemple

mais
xPos = oObject.currentStyle.left;

Et là, ça fonctionne. J'ai trouvé ça par hasard sur la source d'un membre, et c'est énorme.
Encore merci, et bonne journée.
LocalStone :big)
Messages postés
514
Date d'inscription
mercredi 19 mars 2003
Statut
Membre
Dernière intervention
1 mars 2009

Bon, bah j'ai essayé et ta solution marche. Le problème, c'est que la div qui contient la veritable image ne bouge plus, et du coup, bah ça ne vas plus, quoi ... Puique les images ne se superposent plus correctement.
Donc ça marche à moitié. Et maintenant, y a un autre problème. Donc, toujours à l'aide !
LocalStone :big)
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
Bonjour,
un début de réponse ?
<html>
   <head>
      <script type="text/javascript">
         var OffsetX;
         var OffsetY;
         window.onload = function()
         {
            document.getElementById('CutterBox').onmousedown = StartCutter;
            document.getElementById('CutterBox').onmousemove = function(){return(false);}
         }
         function StartCutter()
         {
            OffsetX = event.x;
            OffsetY = event.y;
            document.onmousemove = MoveCutter;
            document.onmouseup = StopCutter;
         }
         function StopCutter()
         {
            document.onmousemove = '';
         }
         function GetCutterTop()
         {
            oCutter = document.getElementById('CutterBox');
            oMove = document.getElementById('MoveBox');

            Top = event.clientY - parseInt(document.getElementById('MoveBox').offsetTop);
            if(Top - OffsetY < 0){Top = 0 + OffsetY;}
            if(Top - OffsetY > parseInt(oMove.currentStyle.height) - parseInt(document.getElementById('CutterBox').currentStyle.height))
            {
               Top = parseInt(oMove.currentStyle.height) - parseInt(document.getElementById('CutterBox').currentStyle.height) + OffsetY;
            }
            return(Magnet(Top - OffsetY, 10));
         }
         function Magnet(value, scale)
         {
            return(Math.floor(value / scale) * scale);
         }
         function GetCutterLeft()
         {
            oCutter = document.getElementById('CutterBox');
            oMove = document.getElementById('MoveBox');
            Left = event.clientX - parseInt(document.getElementById('MoveBox').offsetLeft);
            if(Left - (OffsetX) < 0){Left = 0 + OffsetX;}
            if(Left - OffsetX > parseInt(oMove.currentStyle.width) - parseInt(document.getElementById('CutterBox').currentStyle.width))
            {
               Left = parseInt(oMove.currentStyle.width) - parseInt(document.getElementById('CutterBox').currentStyle.width) + OffsetX;
            }
            return(Magnet(Left - OffsetX, 10));
         }
         function MoveCutter()
         {
            oCutter = document.getElementById('CutterBox');
            oImg = document.getElementById('ImgBox');
//////            oCutter.style.top = GetCutterTop() + 'px';
//////            oCutter.style.left = GetCutterLeft() + 'px';
oCutter.style.top=event.y;
oCutter.style.left=event.x;
            oImg.style.top = - GetCutterTop() - parseInt(oCutter.currentStyle.borderWidth) + 'px';
            oImg.style.left = - GetCutterLeft() - parseInt(oCutter.currentStyle.borderWidth) + 'px';
            return;
         }
         function MoveImg()
         {
            oImg = document.getElementById('ImgBox');
            oCutter = document.getElementById('CutterBox');
            oImg.style.top = - GetCutterTop() + 'px';
            oImg.style.left = - GetCutterLeft() + 'px';
            return;
         }
         function GetImgTop()
         {
            oCutter = document.getElementById('CutterBox');
            ImgTop = - parseInt(oCutter.currentStyle.top)
            return(ImgTop + 'px');
         }
         function GetImgLeft()
         {
            oCutter = document.getElementById('CutterBox');
            ImgLeft = - parseInt(oCutter.currentStyle.left)
            return(ImgLeft + 'px');
         }
      </script>
   </head>
   
      

         
         

            

               

                  
               

            

         

      

   
</html>

Cordialement Bul. [Site] [[mailto:marcel.Bultez@Tiscali.fr Mail]]
Messages postés
514
Date d'inscription
mercredi 19 mars 2003
Statut
Membre
Dernière intervention
1 mars 2009

Héééé non, ça ne marche pas encore parfaitement, par contre, le bug qui se présentait sur mon script n'y est plus, donc ... Je vais bien étudier ta source ce soir et la comparer avec la mienne pour trouver l'erreur.
A mort le JavaScript foireux ! Mais merci de ton aide, Bultez, c'est sympa.
LocalStone :big)