Question

我认为这很简单但是在可调整大小的容器中放置一个可拖动元素时，jQuery UI中似乎存在一些错误。

以下代码允许将draggable元素放置在容器外部，因为调整大小句柄（jsfiddle here）创建了额外的高度。

HTML

<div class="container2">
    <div class="item2"></div>
</div>

CSS

.container2 {
    min-width:300px;
    min-height:200px;
    outline:1px solid black;
}
.item2 {
    width:50px;
    height:50px;
    background-color:red;
}

的jQuery

$(".container2").resizable();

$(".item2").draggable({
    containment: ".container2"
}).resizable({
    containment: ".container2"
});

所以我通过使用following code将包含设置为容器的坐标来解决这个问题：

$(".item2").draggable({
    start: function (event, ui) {
        var containmentX1 = $(".container2").offset().left;
        var containmentY1 = $(".container2").offset().top;
        var containmentX2 = ($(".container2").outerWidth() + $(".container2").offset().left - $(this).outerWidth())
        var containmentY2 = ($(".container2").outerHeight() + $(".container2").offset().top - $(this).outerHeight())
        $(this).draggable({
            containment: [containmentX1, containmentY1, containmentX2, containmentY2]
        });
    },
}).resizable({
    containment: ".container2"
});

除了一个问题外，这个工作正常......只有第二次移动可拖动元素时才设置包含坐标。

我使用create而不是开始绕过它，但是如果调整容器的大小，坐标就不会改变。

有没有办法在第一次拖动时将坐标识别为包含区域。？

Answer 1

如果遵循您的方法，您可以在调整“.container2”大小时和初始化时查看there

另一个解决方案可能只是使用css：

 .container2 .ui-resizable-s
{
    bottom:0;
}
.container2 .ui-resizable-e
{
    right:0;
}

您可以验证there ，希望这有帮助

Answer 2

你可以将你的收容重新计算包装成一个单独的函数，并在初始化draggable（在创建时）和每次容器调整大小（om stop）后调用它

$(".container2").resizable({
stop: reCalcBounds
});

$(".item2").draggable({
    create: reCalcBounds
}).resizable({
    containment: ".container2"    
});

function reCalcBounds(){
 var $item =  $(".item2");
 $container = $(".container2");
 var containmentX1 = $container.offset().left;
    var containmentY1 = $container.offset().top;
    var containmentX2 = ($container.outerWidth() + $container.offset().left - $item.outerWidth())
    var containmentY2 = ($container.outerHeight() + $container.offset().top -$item.outerHeight())
    $item.draggable("option", "containment", [containmentX1, containmentY1, containmentX2, containmentY2]);

}

请参阅更新的fiddle

我认为你还需要根据可拖动项目的位置来处理可调整大小容器的minWidth和minHeight，你可以使用draggable的“stop”callaback

可调整大小的容器中的可拖动元素的包含问题

2 个答案: