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

debugcn 发表于 Dev

汤姆

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

以下代码允许将可拖动元素放置在容器的外部稍稍一点，因为调整大小手柄（jsfiddle此处）会产生额外的高度。

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

所以我通过使用以下代码将容器设置为容器的坐标来解决此问题：

$(".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而不是开始解决这个问题，但是如果调整容器大小，则不会更改坐标。

有没有一种方法可以在第一次拖动时将坐标识别为容纳区域？

保利托

您可以将遏制重新计算包装到单独的函数中，并在初始化可拖动对象（创建时）以及每次调整容器大小（停止时）后调用它

$(".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]);

}