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