jQuery droppable ignore the z-index?

My problem, the drop-function starts when I sort the list.

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%; bac开发者_如何学Pythonkground-color:#cccccc; z-index:1;"></div>

Working example

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

Tabks in advance. Peter

First off, your question title is misleading - z-index is a CSS property that decides which element would display on top of each other when two or more of them occupy the same space, and has nothing to do with the problem you are having here.

The solution to your problem is rather easy: make the div containing the list droppable, then use the greedy option to prevent the drop event from bubbling up.

Have a look here: http://www.jsfiddle.net/DKZRp/1/