jquery - jQuery Greedy Droppable Dialog 可能吗？

Question

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

Answer 1

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

因此，存在重叠可排序列表的问题，因此我必须使用内置事件编写重新处理。我使用 beforeStop 来查找助手之间是否存在冲突(项目正在获取)拖动)和一个连接列表。如果发生冲突，我会将其附加到新列表中。

以下是示例的 jQuery 代码:请务必包含 jQuery 碰撞: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>