jQuery UI，可拖动的子 div 大于父级

【问题标题】：jQuery UI, draggable child div larger than parentjQuery UI，可拖动的子 div 大于父级
【发布时间】：2011-09-30 08:27:47
【问题描述】：

我查看了几篇文章并尝试了所有提出的方法，但目前还没有找到解决方案。

我正在尝试创建一个可拖动的地图，但当它自己的边缘与父边缘的边缘相遇时会停止。孩子比父母大，所以我尝试了所有不同类型的方法来解决这个问题，但还没有找到解决方案。

下面的示例显示了一个示例，其中黑色边框不应包含任何空白。我尝试了几种不同风格的收容措施，但还没有弄清楚它的数学原理。

示例：http://jsfiddle.net/LQtCY/3/

谢谢

【问题讨论】：

标签： jquery jquery-ui draggable parent

【解决方案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/

【讨论】：

当孩子的边缘遇到父母时，我怎样才能让它停下来。我不希望黑框内有空白：jsfiddle.net/LQtCY/3
我不介意孩子越过黑线，只要它确实超过了里面的 1 个像素，如果这有意义的话？
谢谢，我的左侧和顶部工作正常，只需要添加右侧和底部。
这不是完整的解决方案，但绝对为我指明了正确的方向......thnx！
不应该是偏移而不是UI对象的位置吗？