Image Mover mit Javascript funktioniert nicht richtig

Wegen eines übergroßen Bildes möchte ich es im Browserfenster scrollbar machen. Scrolling sollte auf zwei Arten funktionieren: a) über Bildlaufleisten und b) durch Mausaktion. Letzteres sollte so funktionieren, als würde man das Bild in die gewünschte Richtung ziehen. Also habe ich ein Skript erstellt und an das Bild angehängt. Obwohl der Code korrekt aussieht, funktioniert er nicht richtig. Das Bild verschwindet manchmal oder springt in eine unerwünschte Position. Sie können das Skript unterImage Mover mit Javascript funktioniert nicht richtig

http://ardent.de/JS/

aufrufen und der Code angebracht ist. Kennt jemand den Grund dafür, dass das Bild springt oder verschwindet? Ich würde mich freuen, eine Antwort zu erhalten.

<html> 
     <head> 
     <meta charset="utf-8"> 
     </head>   
     <body> 
     <img src="schloss.jpg" id="image" /> 

     <script> 
     var div=document.getElementById('image'); 
     var iwidth,iheight,oldY,oldX,newX, newY; 
     var mouseisdown=false; 

     div.addEventListener('load', function() { 
     iwidth=this.naturalWidth; 
     iheight=this.naturalHeight; 
     }); 

     function getCoordinates(elem) { 
     var LeftPos = elem.offsetLeft; 
     var TopPos = elem.offsetTop; 
     return {X:LeftPos,Y:TopPos}; 
     } 

     function addListeners() { 
     div.addEventListener('mousedown', mouseDown, false); 
     div.addEventListener('mouseup', mouseUp, false); 
     window.addEventListener('mousemove', divMove, false); 
     var p=getCoordinates(div);oldX = p.X;oldY = p.Y; 
     } 

     function mouseUp() { 
     mouseisdown=false; 
     } 

     function mouseDown() { 
     mouseisdown=true; 
     } 

     function divMove(e){ 
     if (mouseisdown) { 
     div.style.position = 'absolute'; 
     newY=e.clientY-oldY; 
     newX=e.clientX-oldX; 
     div.style.top = newY + 'px'; 
     div.style.left = newX + 'px'; 
     oldY=newY; 
     oldX=newX;} 
     } 

     addListeners(); 

     </script> 

    </body> 
    </html>

Quelle

2017-10-23 JensD

Diese Logik ist falsch:

newY=e.clientY-oldY; 
newX=e.clientX-oldX; 
... 
oldY=newY; 
oldX=newX;

Lassen Sie Ihre oldX sagen ist 0 beim Start. e.clientX kann 1920 in einem Full-HD-Bildschirm sein.

newX Wert könnte 0-1920 springen, weil:

newX=e.clientX-oldX; // 1920 - 0 
oldX=newX; // 1920 
... // Next tick 
newX = e.clientX - oldX; // 1920 - 1920 
oldX=newX; // 0

Also im Grunde das ist, warum das Bild von zwei ungeraden Positionen springt.

Quelle

2017-10-23 16:07:24 lilezek

OK, ich habe den Code korrigiert, aber es funktioniert immer noch richtig. Gedrückt halten der Maus und Verschieben des Bildes funktioniert nicht - ich muss vorher mit der Maus klicken und danach verschieben. – JensD

@JensD, wenn Sie Ihren Code korrigiert haben, möchten Sie dies entweder als richtige Antwort markieren oder selbst eine bessere Antwort geben. – lilezek

@lilizek danke für die erste Analyse, die sehr hilfreich war. Ich komme später mit einem besseren Code zurück. – JensD

Dies ist jetzt der verbesserte Code. Die Verwendung von globalen Variablen wurde reduziert und nur zwei, OldX/Y, bleiben übrig. Mein erster logischer Fehler bei der Positionierung wurde korrigiert. Das andere Problem war das Ziehverhalten des Bildes, das das mouseup-Ereignis hemmte. Also setze ich ziehbare auf false und jetzt funktioniert es im Chrome-Browser einwandfrei. Auch musste ich die Reihenfolge von img ... und Skript berücksichtigen ... was manchmal wichtig ist, wenn es einen Bezug zwischen beiden Tags gibt. Sehen Sie sich nun http://ardent.de/JS/ an und verschieben Sie das Bild durch Drücken der Maustaste und Bewegen der Maus.

 <html> 
     <head> 
     <meta charset="utf-8"> 
     </head> 
     <body> 
     <div id="image" onmousedown="mouseDown();" onmouseup="mouseUp();"> 
      <img src="schloss.jpg" draggable="false" /> 
     </div> 

     <script> 
     var oldY,oldX; 

     function getCoordinates(elem) { 
      var LeftPos = elem.offsetLeft; 
      var TopPos = elem.offsetTop; 
      return {X:LeftPos,Y:TopPos}; 
     } 

     function mouseUp() { 
      document.removeEventListener('mousemove', mouseMove, false); 
      document.removeEventListener('mouseup', mouseUp, false); 
     } 

     function mouseDown() { 
     document.addEventListener('mousemove', mouseMove, false); 
     document.addEventListener('mouseup', mouseUp, false); 
     oldY=-1; oldX=-1; 
     } 

     function mouseMove(e){ 
      var iwidth,iheight,newX, newY, diffX, diffY; 
      var div=document.getElementById('image');   
      div.style.position = 'absolute'; 
      if (oldX==-1) { 
      diffX=0;diffY=0;} 
      else { 
      diffY=e.clientY-oldY;diffX=e.clientX-oldX;} 
      var p=getCoordinates(div); 
      newY=p.Y+diffY;newX=p.X+diffX; 
      div.style.top = newY + 'px';div.style.left = newX + 'px'; 
      oldY=e.clientY;oldX=e.clientX; 
      } 

     </script> 

    </body> 
    </html>

Quelle

2017-10-30 18:33:59 JensD

Image Mover mit Javascript funktioniert nicht richtig

Antwort

Verwandte Themen