jQuery Draggable 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]});
});