在div内拖动div (子>父)

Question

我试了很多次，但我没能成功：

我在div中有一个div，并且希望子(= inside div)只能在父级中被拖动。事情是这样的:孩子比父母大，每次我想把孩子拖到父母里面时，它总是在父母身边立即抓拍，因为它不合身。

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

这是一个项目：

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

谢谢!

澄清:儿童的边界应与父母的边界相同。

Answer 1

现在，让yout问题变得更清楚，您需要的是更改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是当前位置减去所需的空间，以显示父节点中子节点的底部或右侧。