Пользовательский интерфейс jQuery, перетаскиваемый дочерний элемент div больше родительского

Question

Я просмотрел несколько статей и перепробовал все предложенные методы, но пока не нашел решения.

Я пытаюсь создать карту, которая будет перетаскиваемой, но остановится, когда ее собственный край встретится с краем края родителя. Ребенок больше, чем родитель, поэтому я пробовал разные методы для решения этой проблемы, но пока не нашел решения.

В приведенном ниже примере показан пример, в котором черная рамка не должна иметь пустого пространства внутри. Я пробовал сдерживание в нескольких разных вкусах, но не понял для этого математики.

Пример: http://jsfiddle.net/LQtCY/3/

Спасибо

Answer 1

Вы пробовали это?

var parentPos = $('.mapshell').offset();
var childPos = $('.mapcontent_1').offset();

$(".mapcontent_1").draggable({
    drag: function(event, ui) {
        if (ui.position.top > parentPos.top) {
            ui.position.top = parentPos.top;
        }
        if (ui.position.left > parentPos.left) {
            ui.position.left = parentPos.left;
        }
    },

    scroll: false
});

http://jsfiddle.net/LQtCY/6/