Hey,
bin gerade dabei mich um ein Kartendesign zu kümmern.
Dazu zählt, dass der User per Drag and Drop die Karte natürlich verschieben kann.
Dazu gibt es folgende HTML Datei:
<html><head>
<style type="text/css">* { margin: 0; padding: 0; }
#map {width: 500px; height: 500px; border: 2px groove #000; overflow: hidden; }
#map #innerMap { width: 2500px; height: 2500px; border: 2px solid red; left: -20px; top: -90px;
position: relative; background: url('media/map.jpg') no-repeat 0 0 fixed; background-size: cover; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/map.js"></script></head>
<body onload="initEvents();">
<div id="map">
<div id="innerMap"></div>
</div></body></html>
Alles anzeigen
Dabei ist das Element "map" der "Maincontainer" zum "halten" der Karte.
InnerMap ist dabei die eigentliche Karte mit Image.
Mein Problem ist nun, dass meine Map sich seltsamerweise nur in 2 Richtungen bewegt.
Nur nach rechts und nach unten.
Habe per console.log ein paar Ausgaben gemacht wohin die Karte eigentlich hinziehen müsste.
Beispielsweise erhalte ich in der Konsole dann das Ergebniss "go to the left" 117x, eine Zeile unter der Ausgabe wird die innerMap sofort verschoben.
Jedoch tut sich dort einfach nichts.
Hier der JS Code dazu:
function drag(e) {
if(dragObj == null) return;
var dir = getDirection(e);
switch(dir) {
case "l":
console.log("go to the left");
document.getElementById("innerMap").style.left = ($("#innerMap").position().left - 2) + "px";
break;
case "r":
console.log("go to the right");
document.getElementById("innerMap").style.left = ($("#innerMap").position().left + 2) + "px";
break;
case "t":
console.log("go to the top");
document.getElementById("innerMap").style.top = ($("#innerMap").position().top - 2) + "px";
break;
case "b":
console.log("go to the bottom");
document.getElementById("innerMap").style.top = ($("#innerMap").position().top + 2) + "px";
break;
default:
return;
}
xpos = e.clientX;
ypos = e.clientY;
}
function getDirection(e) {
var dir = "no";
if(e.clientX > xpos) dir = "r";
else if(e.clientX < xpos) dir = "l";
else if(e.clientY > ypos) dir = "b";
else if(e.clientY < ypos) dir = "t";
return dir;
}
Alles anzeigen
Ist natürlich nicht alles aber die Methoden start, stop, init habe ich jetzt einfach mal weggelassen. Das funzt ja auch alles.
Hoffe mir kann jemand sagen wo da mein Denkfehler liegt.
Aber an sich bekomme ich die korrekten Ausgaben, wohin sich die Karte bewegen soll, jedochbewegt sie sich wie gesagt nru nach unten und nach rechts 
lg
