Jquary droppable ignore the z-index ?

Question

Hi,

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%; background-color:#cccccc; z-index:1;"></div>

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

Tabks in advance. Peter

Answer 1

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/