是否可以使用jQuery Greedy Droppable对话框？

Question

我试图创建一个对话框，我可以将元素放入“in”中，但由于下面的元素也可以放入，因此我遇到了问题。有没有一种方法可以模拟或增强可嵌入元素上的贪婪特性（没有嵌套元素）（可能是z-index）？或者是否可以在对话框中嵌套对话框（这可能是重叠对话框在同一级别的问题）？

Answer 1

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

因此，有具有重叠的排序列表，所以我不得不写内置的事件rearound问题。我使用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>