jQuery droppable игнорировать z-index?

Question

Моя проблема, функция drop начинается, когда я сортирую список.

JS

$(document).ready(function rt() 
{ 
    $("#div1").draggable(); 
    $("#k1").sortable({ revert: '100' }); 
    $('#droparea').droppable({ accept: 'li', drop: function() { alert('ssss'); } }); 
}); 

HTML

<div id="div1" style="z-index:5;"> 
    <ul id="k1" style="width:350px; height:200px; background-color:#ffffff; margin:20px; padding:10px; border:1px solid #000000; "> 
     <li>One</li> 
     <li>two</li> 
     <li>three</li> 
    </ul> 

</div> 

<div id="droparea" style="position:absolute; top:0px; left:0px; width:100%; height:100%; background-color:#cccccc; z-index:1;"></div> 

Рабочий пример

http://www.jsfiddle.net/V9Euk/130/

Tabks заранее. Peter

Answer 1

Во-первых, ваше название вопроса вводит в заблуждение - z-index - это свойство CSS, которое определяет, какой элемент будет отображаться друг на друга, когда два или более из них занимают одно и то же пространство и не имеют ничего общего с проблемой вы здесь.

Решение вашей проблемы довольно просто: сделайте div содержащий список droppable, затем используйте жадный вариант, чтобы предотвратить событие пузырьков drop.

Посмотрите здесь: http://www.jsfiddle.net/DKZRp/1/