Jquery 将div拖动到div内部（子级>；父级）

我尝试了很多方法，但都无法成功：

我在一个div中有一个div，并且希望子（=内部div）只能在父对象中拖动。 问题是：子对象比父对象大，每次我想在父对象中拖动子对象时，它总是立即在父对象的侧面捕捉，因为它不适合

任何解决方案都将不胜感激

以下是项目：

下面是我想做的：

HTML

JS

谢谢

澄清：

---

孩子的边界应该与父母的边界相同。

现在让您的问题更清楚了，您需要的是更改

包含

选项

您需要使用“阵列”选项，并将框大小定义为可将拖动对象移动到的位置：

var draggable = $('.image');
var viewport = $('.nhood');
var viewportOffset = viewport.offset();
var box = 
    {
        x1: viewportOffset.left + (viewport.outerWidth() - draggable.outerWidth()),
        y1: viewportOffset.top + (viewport.outerHeight() - draggable.outerHeight()),
        x2: viewportOffset.left,
        y2: viewportOffset.top
    };

$(".image").draggable(
        {
            containment: [box.x1, box.y1, box.x2, box.y2 ]
        });

---

诀窍在于框坐标，注意

x1

和

y1

是当前位置减去在父对象中显示子对象底部或右边缘所需的空间。

谢谢，但我希望子对象边框是父对象边框。您的意思是子对象的大小应与其位置相适应吗？否则我看不出你在问什么。你应该在你的问题中发布这个链接，现在它是这样工作的，谢谢你，我添加了这个问题的链接。这解决了我的问题！谢谢！

.image {
    width: 600px;
    height: 600px;
    border: solid 5px black;
    background: green;
    cursor:move;
}



.nhood {
    margin: 100px auto 0 auto;
    overflow: hidden;
    width: 400px;
    height: 400px;
    position: relative;
}

$(".image").draggable(
    {
        containment: ".nhood"
    });

var draggable = $('.image');
var viewport = $('.nhood');
var viewportOffset = viewport.offset();
var box = 
    {
        x1: viewportOffset.left + (viewport.outerWidth() - draggable.outerWidth()),
        y1: viewportOffset.top + (viewport.outerHeight() - draggable.outerHeight()),
        x2: viewportOffset.left,
        y2: viewportOffset.top
    };

$(".image").draggable(
        {
            containment: [box.x1, box.y1, box.x2, box.y2 ]
        });