Question

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

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

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

以下是一些片段：

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

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

1 个答案: