4

私は、他の複数の div を含む div とサイズ変更可能な jQuery UI を持つページで遊んでいます。これは基本的に、個々のウィジェットを備えたダッシュボードです。私が必要とするのは、含まれている div 内の他のすべての div とは無関係に、個々の「ウィジェット」 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 をプッシュしないようにするにはどうすればよいですか?

ありがとう！

4

1 に答える 1

3

動いているあなたの箱は絶対的である必要があります。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');
    }
于 2013-09-06T16:08:26.120 に答える