Question

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

我在div中有一个div，并希望子（=内部div）只能在父级内拖动。问题是：孩子比父母大，每次我想在父母中拖动孩子，它总是紧紧抓住父母的一边，因为它不适合。

感谢任何解决方案!!

这是项目：

这就是我想要做的：

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

现在，您可以更清楚地提出问题，您需要更改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是当前位置减去显示父级中子项的底边或右边所需的空间。

在div中拖动div（child＆gt; parent）

1 个答案: