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

我看过几篇文章，尝试了所有提出的方法，到目前为止还没有找到解决方案

我正在尝试创建一个可拖动的贴图，但当它自己的边与父边的边相交时将停止。子对象比父对象大，因此我尝试了所有不同类型的方法来解决此问题，但尚未找到解决方案

下面的示例显示了一个示例，其中黑色边框内不应有任何空白。我尝试过几种不同的遏制方式，但还没有找到解决方法

例如：

谢谢你试过这个吗

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

---

当子对象的边缘与父对象相交时，如何使其停止。我不想在黑匣子里有一个空白：我不介意孩子走出黑线，只要它在里面超过1个像素，如果这有意义的话？谢谢，我让左侧和顶部工作正常，只需要添加右侧和底部。这不是完整的解决方案，但肯定给我指明了正确的方向…thnx！它不应该是偏移量而不是UI对象的位置吗？