javascript - 相对于绝对定位容器的 jQuery 可拖动 x,y 容器

Question

我有一张地图，我正在尝试使其可拖动，并且包含 x,y 坐标。我遇到的问题是这些坐标似乎基于窗口大小。

它在 1280x1024 窗口中完美运行，但任何其他窗口大小都会使遏制失效。我对使用父容器犹豫不决，因为图像太大（1350x1700）。

我的代码看起来像这样

CSS：

    #mapcontainer {
    width:700px;
    height:500px;
    overflow:hidden;
    padding:0px;
    margin:-250px -350px;
    border:4px solid #ddd;
    position:absolute;
    top:50%;
    left:50%;
    z-index:2;
}
#map {
    position:relative;
    top:-400px;
    left:-200px;
    z-index:1;
}

#mapimg {
    position:relative;
    top:0px;
    left:0px;
}

HTML

<div id="mapcontainer">
    <div id="map">
        <img src="map.jpg" alt="" id="mapimg" onload="reveal();" />
    </div>
</div>

JS

$(function() {
    $( "#map" ).draggable({containment: [-340,-1035,275,120]});
});