jQuery UI Resizable - 多个 DIV 调整大小推动其他 DIV

Question

我一直在玩一个页面，该页面有一个包含多个其他 div 和 jQuery UI 可调整大小的 div。它基本上是一个带有单独小部件的仪表板。我需要的是能够独立于包含 div 中的每个其他 div 来调整每个单独的“小部件”div 的大小。

目前，如果我调整一个 div 的大小，它会将其他 div 推开。我需要调整 div 的大小并让它不影响其他 div（即使正在调整大小的 div 落后于或超过任何其他 div 的顶部）。在尝试了许多不同的事情之后，我无法实现它。

我创建了一个 jsFiddle (http://jsfiddle.net/gattml/Th75t/)，它显示了我迄今为止的模型。

这里有一些sn-ps：

<div class="carousel-inner">
    <div class="item">

    <div class="widgetList">
        <div class="widgetRefresh">
            <div class="widgetResizable">
                <div class="widget-header">
                    <span>header1</span>
                </div>
                <div class="widget-body">
                    <span>body1</span>
                </div>
            </div>
        </div>
    </div>

    ...other "widget" divs here...

    </div>
</div>

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    outline: 1px solid red;
}

.item {
    left: 0;
    display: block;
    position: relative;
    outline: 1px solid blue;
}

.widgetList {
    background-color: #f5f5f5;
    display: inline-block;
    margin: 1em;
    position: relative;
    vertical-align: top;
    min-width: 80px;
    outline: 1px solid green;
}

.widgetResizable {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 80px;
    overflow: hidden;
    outline: 1px dashed red;
}

.widget-header {
    outline: 1px dashed blue;
}

.widget-body {
    overflow: hidden;
    width: auto;
    height: 100px;
    padding: 4px;
    outline: 1px dashed green;
}

var $widget = $(".widgetList");
var $widgetResizable = $widget.find(".widgetResizable");
$widgetResizable.css("height", "170px");
$widget.draggable({
    cursor: "move",
    grid: [4, 4],
    handle: ".widget-header",
    opacity: 0.85,
    zIndex: 100
});
$widgetResizable.resizable({
    grid: [4, 4],
    handles: "e, s, se",
    minHeight: 100,
    minWidth: 80
});

那么，我怎样才能实现我的可调整大小的“小部件”div，以便它们不会推挤其他“小部件”div？

谢谢！

Answer 1

你的盒子必须是绝对的。您可以在 start:function(){} 上添加我推荐的类，也可以添加 css 属性。您还需要添加一个 z-index 值以使您的框位于其他框之上。

http://jsfiddle.net/Th75t/7/

start:function(event,ui){
        ui.element.css('position','absolute');
    }

更好

start:function(event,ui){
        ui.element.addClass('active');
    }