jqueryui可調整大小和可拖動元素

Question

我有兩個可拖動和可調整大小的元素。 它們是水平的。 我的問題是當我試圖調整頂部的第一個元素時，下面的第二個元素位置將自動覆蓋第一個元素。

以下是風格：

<style>
    #request-grid { width: 500px; min-height: 200px; margin: 10px; padding: 0.5em;}
    #bb-clist { width: 500px; min-height: 200px; margin: 10px; padding: 0.5em;}
    .ui-resizable-helper { border: 2px dotted #00F; }
</style>

下面是jqueryui代碼：

$( "#request-grid" ).draggable({containment: "#content", scroll: true, stack: "#content div" });
$( "#bb-clist" ).draggable({containment: "#content", scroll:true, stack: "#content div"});

$( "#request-grid" ).resizable({
helper: "ui-resizable-helper",  containment: "#content"
});

$( "#bb-clist" ).resizable({
helper: "ui-resizable-helper", containment: "#content"
});

下面是html元素：

<div id="request-grid" class="ui-widget-content">
</div>

<div id="bb-clist" class="ui-widget-content">
</div>

在調整大小時，如何在沒有其他元素覆蓋/重疊其他元素的情況下解決此問題。

謝謝。

Answer 1

HTML

<div>
    <div id="request-grid"></div>
    <br/>
    <div id="bb-clist"></div>
</div>

CSS

#request-grid {
    height:100px;
    width: 200px;
    min-height: 100px;
    margin: 10px;
    padding: 0.5em;
    background-color:pink;
}
#bb-clist {
    height:100px;
    width: 200px;
    min-height: 100px;
    margin: 10px;
    padding: 0.5em;
    background-color:blue;
}
.ui-resizable-helper {
    border: 2px dotted #00F;
}

jQuery的

$(document).ready(function () {

    $("#request-grid").draggable({
        containment: "#document",
        scroll: false,
        stack: "#content div"
    });
    $("#bb-clist").draggable({
        containment: "#document",
        scroll: false,
        stack: "#content div"
    });

    $("#request-grid").resizable({
        helper: "ui-resizable-helper",
        containment: "document",
        resize: function (event, ui) {
            var height = (ui.size.height + 'px');
            $('#bb-clist').css('posotion', 'absolute').css('top', height);
        },
        stop: function (event, ui) {
            var h2 = (ui.size.height);
            if (h2 < 200) {
                h2 = 100; // set default min-height if re-sized less than min-height.
            }
            $('#bb-clist').css('posotion', 'absolute').css('top', h2);
        }

    });

    $("#bb-clist").resizable({
        helper: "ui-resizable-helper",
        containment: "document"
    });
});

工作演示 http://jsfiddle.net/cse_tushar/qkKV6/

Answer 2

您可以使用z-index值來克服重疊問題。

只需將更高的z-index值放入可調整大小的元素中，如：

#ResizableElement
{
  z-index: 10;    //default is 1
}

具有較高z-index值的元素將始終與其他元素重疊。 你也可以為你的draggable元素設置一個z-index值，它也可以工作。

$("#request-grid").draggable({ zIndex: 10 });

Answer 3

我能夠使用這些問題的解決方案來解決問題。 限制jQuery可拖動項目與兄弟元素重疊/碰撞， 如果在div之外和其他draggables內部，則拖拽恢復（使用無效和有效的恢復選項）

我最初在搜索問題時沒有使用術語碰撞。