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