Mouseevent funktioniert nicht(onmousemove nach onmousedown)

Xching

Erfahrenes Mitglied
Hallo Zusammen,

mein Ziel ist, dass die Karte mit Mouse Event (javascript) verschieben kann, aber ich habe bis jetzt noch nicht hinbekommt.
Funktionsweise:

-Allgemein : die Karte kann verschien , wenn ich Karte bis zu maximal die Karte gezoomt habe
- mousedown: Mouseposition wird richtig bei gedrückter Mousetaste angezeigt
- mousemove nach mousedown: Die Karte soll bei weiterbewegter Maus verschieben.
- mouseup: wenn man Mousetaste losgelassen hat, soll die Karte aufgehört zu verschieben und neue Mouseposition gemerkt werden sollte, damit man die Karte von neue Mouseposition weiter verschieben kann.

Ich habe gerade das Problem :

Wenn ich die Karte zum Ersten Mal verschoben habe nachdem ich die Karte bis zu maximal gezoomt habe, kann ich Karte verschieben und movemap wird auf 1 gesetzt und das Element um tx in X-Richtung und ty in Y-Richtung hat sich auch geändert . Aber wenn ich Mousetaste losgelassen haben dann wird movemap auf 0 gesetzt . Bis jetzt war schon richtig, wie ich gewollt habe.


Aber wenn ich noch mal die Mousetaste gedrückt habe und ich wollte noch mal verschieben, springt die Karte wieder am Anfangposition und das Element um tx in X-Richtung und ty in Y-Richtung wird wieder auf 0 gesetzt. Ich verstehe nicht, wo mein Fehler ist. Ich habe seit 3 Wochen mit diesem Problem beschäftigt.





Ich habe hier die Code :





Javascript:
<script type="text/javascript">
<![CDATA[

var mouseX;
var mouseY;
var mouseXdown=0;
var mouseYdown=0;
var deltaX=0;
var deltaY=0;
var deltaXsave=0;
var deltaYsave=0;
var deltaXmax=0;
var deltaYmax=0;
//var mouseIsDown = false;
var movemap = 0;
var transform="";
var translate="";
var scale;

function zoom(plusminus) {
   //alert(plusminus);
   var i;
   var scales=['.$scalesString.'];
   var scalesValue=['.$scalesValue.'];
   var takeNext=0;
   var vergleichTransform;

   transform=document.getElementById("layer1wMap").getAttribute("transform");
   scaleValue=scalesValue[i];
   scaleValueAlt=scaleValue;
   scaleVergleich=transform.split(" ");
   Schleife: for(i=0; i < scales.length; i++) {
     //alert(scaleVergleich[0]+"=="+scales[i]);
     if(scaleVergleich[0]==scales[i]) {
       //alert("IST GLEICH");
       if(plusminus=="+" && i+1 < scales.length) {
         //transform=scales[i+1];
         scale=scales[i+1];
         scaleValue=scalesValue[i+1];
         transform=scale;
         if(translate!="") {
           transform=transform+" "+translate;
         }
         break Schleife;
       }
       if(plusminus=="-" && i > 0) {
         scale=scales[i-1];
         scaleValue=scalesValue[i-1];
    
         transform=scale;
         if(translate!="") {
     
           transform=transform+" "+translate;
         }
         break Schleife;
       }
     }
   }
   //alert(transform);
   document.getElementById("layer1wMap").setAttribute("transform",transform);
   document.getElementById("layer2wMap").setAttribute("transform",transform);


   deltaXmax=Math.round ('.$width.'*scaleValue-'.$screenWidth.');
   deltaYmax=Math.round ('.$height.'*scaleValue-'.$height.'*'.$screenWidth.'/'.$width.');

   if(deltaXsave>0) {
     deltaXsave=Math.round (deltaXsave*scaleValue/scaleValueAlt);
   }
   if(deltaYsave>0) {
     deltaYsave=Math.round (deltaYsave*scaleValue/scaleValueAlt);
   }


}

//nmousedown
//beim Herunterdrücken einer Maustaste
function setMoveMapStart() {

// Wenn Mmousetaste gedrückt  ist 1
  movemap = 1;

// Anfang Mouseposition gleich eventuelle Position einsetzen
   mouseXdown = mouseX;
   mouseYdown = mouseY;


}

// onmousemove
// beim Bewegen des Mouses
function moveMap(event) {

   // eventuelle Position
   mouseX = Math.round (event.clientX);
   mouseY = Math.round (event.clientY);

  // Berechnumg der differente Position (Eventuell - Anfangposition)
  deltaX=deltaXsave+(mouseX - mouseXdown);
    deltaY=deltaYsave+(mouseY - mouseYdown);


  //var moveElement=document.getElementById("layer1wMap");
   var resultElement=document.getElementById("testausgabe");

   resultElement.innerHTML="deltaXmax "+deltaXmax+"  / deltaYmax "+deltaYmax+" -
   mouseX "+mouseX+" / mouseY "+mouseY+" - deltaX "+deltaX+" / deltaY "+deltaY+" -
   mouseIsDown "+movemap+" - transform("+transform+")";

   //Während der Maustaste gedrückt
   // wenn die diffente Position nicht größe als maximale Position ist,soll sich weiter verschieben werden
   // Vrschiebt das Element um tx in X-Richtung und ty in Y-Richtung.
   if(movemap == 1){

  if(deltaX<-deltaXmax) {
  
     deltaX=-deltaXmax;
     }
     if(deltaX>0){
       deltaX=0;
     }
  
     if(deltaY<-deltaYmax) {
       deltaY=-deltaYmax;
     }
     if(deltaY>0) {
       deltaY=0;
     }
  
     //das Element um tx in X-Richtung und ty in Y-Richtung.
    translate="translate("+deltaX+","+deltaY+")";
       //mouseXdown = mouseX;
    // mouseYdown = mouseY;
     transform=scale+" "+translate;
     document.getElementById("layer1wMap").setAttribute("transform",transform);
     document.getElementById("layer2wMap").setAttribute("transform",transform);
     //event.preventDefault();
  
  
   }

  
}

// onmouseup
// beim Loslassen einer gedrückten Maustaste
function setMoveMapStop() {
   movemap = 0;
   //detaXsave = mouseX;
   //detaYsave =  mouseY;
  
}


]]>
</script>
';
 
Zuletzt bearbeitet:
Zurück