1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Koordinaten bei Mousemove speichert nicht

Dieses Thema im Forum "Javascript & Ajax" wurde erstellt von Xching, 5. Juni 2015.

  1. Xching

    Xching Erfahrenes Mitglied

    Problem :

    Ich kann die neuen Koordinaten nicht speichern, die ich gerade verschoben habe. Die Karte ist immer zu alte Koordinaten gesprungen , wenn ich zum 2.Mal die Karte verschiebe.


    Ich habe hier Mouse Event Funktion geschrieben (mousedown,mousemove, mouseup)

    1.Mal bei Mousedown

    Nach dem ich gezoomt habe, möchte ich die Karte verschieben

    Wenn ich die Mouse gedrückt halten habe ,wird die angefangen Koordinaten angezeigt.



    1.Mal bei Mousemove

    Wenn ich die Karte mit dem Mouse verschoben habe ,wird die differenten Koordinaten ermittelt.
    ich habe die Karte hier nach oben verschoben.


    1.Mal bei Mouseup

    Wenn ich die Mouse losgelassen habe ,die Koordination wird angezeigt, wo die Mouse am Ende gerade ist.

    2. Mal bei Mousedown

    Wenn ich die Mouse gedrückt halten habe , die angefangen Koordinaten wird angezeigt.

    2. Mal bei Mousemove (hier habe ich Problem)

    Wenn ich gerade die Mouse auf die Karte bewegen habe, springt die Karte wieder auf die angefangen Koordinaten (1.Mal bei Mousedown)

    ich hoffe, dass ihr mir weiter helfen kann.ich weiß es nicht warum?. ich danke euch schon mal voraus

    Code (Javascript):
    1. function mousedown(e){
    2.  
    3.  
    4.   movemap = true;
    5.  
    6.   startx = Math.round(e.clientX); // get x position of touch point relative to left
    7.   starty = Math.round(e.clientY);
    8.   statusdiv.innerHTML = "Status: mousedown<br> ClientX: "+ startx +"px "+starty+" Movemap = "+movemap+"";
    9.  
    10.   //e.preventDefault();
    11.  
    12. }
    13. function mousemove(e){
    14.  
    15.     last = { x : 0,
    16.             y : 0 };
    17.  
    18.      if (!e) {
    19.          var e = window.event;
    20.       }
    21.     if (e.pageX || e.pageY){
    22.         mouseX = e.pageX;
    23.         mouseY = e.pageY;
    24.     } else if (Math.round(e.clientX) || Math.round(e.clientY)){
    25.  
    26.         mouseX = Math.round(e.clientX) + document.body.scrollLeft + document.documentElement.scrollLeft;
    27.         mouseY = Math.round(e.clientY) + document.body.scrollTop + document.documentElement.scrollTop;
    28.     }
    29.  
    30.  
    31.  
    32.   // maximal,die Karte verschieben konnte
    33. deltaXmax=Math.round ('.$width.'*scaleValue-'.$screenWidth.');
    34.       deltaYmax=Math.round ('.$height.'*scaleValue-'.$height.'*'.$screenWidth.'/'.$width.');
    35.  
    36. // Berechnung dieffente Koordinaten
    37.  
    38.      distx  = mouseX - startx;
    39.      disty = mouseY - starty;
    40.    
    41.     if(!movemap){
    42.  
    43.        return;
    44.     }
    45.  
    46.      else if(movemap != false){
    47.  
    48.  
    49.          if(distx<-deltaXmax) {
    50.    
    51.         distx=-deltaXmax;
    52.         }
    53.         if(distx>0){
    54.             distx=0;
    55.         }
    56.    
    57.         if(disty<-deltaYmax) {
    58.             disty=-deltaYmax;
    59.         }
    60.         if(disty>0) {
    61.             disty=0;
    62.         }
    63.  
    64.  
    65.  
    66.        last.x += distx + last.x;
    67.        last.y += disty + last.y;
    68.    
    69.        translate="translate("+last.x+","+last.y+")";
    70.       transform=scale+" "+translate;
    71.       //transform= translate;
    72.  
    73.       document.getElementById("layer1wMap").setAttribute("transform",transform);
    74.       document.getElementById("layer2wMap").setAttribute("transform",transform);
    75.       statusdiv.innerHTML = "Status: mousemove1<br> Resting x coordinate:"+last.x+"px"+last.y+"Movemap = "+movemap+"";
    76.  
    77.     }
    78. }
    79.  
    80. function mouseup(e){
    81.  
    82. movemap = false;
    83. endpunktx = e.clientX;
    84. endpunkty = e.clientY;
    85. statusdiv.innerHTML = "Status: mouseup<br> Resting x coordinate:"+ endpunktx +"px"+endpunkty+"Movemap = "+movemap+"";
    86.  
    87.  
    88.  
    89. }
     
    Zuletzt bearbeitet: 8. Juni 2015
  2. jeipack

    jeipack Erfahrenes Mitglied

    Welche Karte und kannst du davon ein fiddle liefern?
     
    Xching gefällt das.
  3. Xching

    Xching Erfahrenes Mitglied

    Hi jeipack, ich habe mein Worldmap als SVG Grafik erstellt, die Pfade und Rechteck von einzelne Länder werden in Datenbank gespeichert. Ich habe hier mit g-Element die Gruppe von jede Pfade(Länder)->id=layer1wMap zusammengeschlossen und . Ich habe hier mit g-Element die Gruppe von jede Rechteck(Länder)->id=layer2wMap zusammengeschlossen .

    upload_2015-6-11_9-2-6.jpeg
     
  4. jeipack

    jeipack Erfahrenes Mitglied

    So ganz schnell als Test:
    Code (Javascript):
    1. function mousedown(e){
    2.   movemap = true;
    3.   startx = Math.round(e.clientX); // get x position of touch point relative to left
    4.   starty = Math.round(e.clientY);
    5. console.log("startx: "+startx);
    6. }
    7. window.onmousedown = function(e) { mousedown(e) }
    8. window.onmousemove = function(e) { mousedown(e) }
    9. window.onmouseup = function(e) { mousedown(e) }
    Wenn ich nun die Maus bewege bekomme ich immer die aktuelle x-koordinate.
    Auch wenn ich die Taste gedrückt halte und herum ziehe bekomme ich keine alte Koordinate.

    Kannst du den Fehler auf http://jsfiddle.net/ reproduzieren?
     
Die Seite wird geladen...