2

我正在尝试创建一个对话框，我可以将元素“放入”其中，但我遇到了问题，因为它下面的元素也是可放置的。有没有一种方法可以在没有嵌套元素的情况下模拟或增强可放置元素的贪婪功能（可能带有 z-index 的东西）？或者是否可以在对话框中嵌套对话框（这可能是同一级别的重叠对话框的问题）？

4

1 回答 1

1

这花了我很多时间来弄清楚，但我在这里有一个工作示例：http: //jsfiddle.net/MadLittleMods/HXRSe/

所以有重叠的可排序列表存在问题，所以我不得不用内置的事件编写一个rearound。我用它beforeStop来查找帮助器（项目被拖动）和连接列表之间是否存在冲突。如果发生冲突，我会将其附加到该新列表中。

这是示例的 jQuery 代码：一定要包含 jQuery Collisions：http: //sourceforge.net/projects/jquerycollision/

$('#container').sortable({
    connectWith: '.sortable_list',
    start: function() {
        $('#popup').fadeIn();
    },
    beforeStop: function(event, ui) {
        var list = ui.helper.collision($('#container').data().sortable.options.connectWith);
        var thisList = $(this);
        list.each(function(index, value) {
            if($(this)[0] != thisList[0]) {
                $(this).append(ui.helper);
            }
        });
    },
    stop: function() {
        $('#popup').fadeOut();
    }
}).disableSelection();

// List to Drag items into...
$('#popup').sortable({
    connectWith: '.sortable_list'
}).disableSelection();

以及与之配套的 HTML/CSS：

<i>Start dragging to see a pop up list.</i>

<div id="container" class="sortable_list">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
</div>

<div id="popup" class="sortable_list">
    Drop Items Here:
</div>​

<style type="text/css">
#container
{
    background: #cccccc;
}

.item
{
    background: #eeeeee;
    border: 1px solid #aaaaaa;
    line-height: 30px;

    cursor: hand; 
    cursor: pointer;
}

#popup
{
    position: absolute;
    top: 40px;
    left: 75px;

    display: none;
    width: 500px;

    background: #444444;
    padding: 4px;
}

</style>
于 2012-10-05T05:40:23.540 回答