将 div 拖入 div (child > parent)

Question

我尝试了很多东西，但我无法让它工作：

我在 div 中有一个 div，并且希望 child（= 内部 div）只能在 parent 中拖动。问题是：child 比 parent 大，每次我想将 child 拖到 parent 内时，它总是立即捕捉到 [= 的一侧52=], 因为装不进去.

感谢任何解决方案！！

这是项目：

http://jsfiddle.net/yc5f9ym6/

这是我想要做的：

http://jsfiddle.net/WBv9r/1/light

HTML

    <div class="nhood">
        <div class="image"></div>
    </div>


</div>

CSS

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

JS

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

谢谢！

澄清： child 的边框应与 parent 的边框相同。

Answer 1

现在你让你的问题更清楚了，你需要的是改变containment选项。

您需要使用 Array 选项，并将框大小定义为可拖动对象可以移动的位置：

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

http://jsfiddle.net/yc5f9ym6/5/

技巧在于框坐标，注意 x1 和 y1 是当前位置减去显示父项中子项的底部或右边缘所需的 space。

将 div 拖入 div (child > parent)

Drag div inside div (child > parent)

jquery

containers

jquery-ui

drag