Draggable and droppable not functioning when placed inside a container with negative z-index

[godfreykfc]

Draggables and droppables refuse to work when placed inside a container with a negative z-index. To reproduce:

#container {
    position: relative;
    width:   500px;
    height:  500px;
    z-index: -1000px;
}

#drag {
    position: absolute;
    top: 0;
    left: 0;
    background-color: red;
}

#drop {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: blue;
}

...

<div id="container">
    <div id="drag"></div>
    <div id="drop"></div>
</div>

...

$(document).ready(function() {
    $('#drag').draggable();
    $('#drop').droppable();
}

[godfreykfc]

Oops, found a typo in the demo code I posted (z-index should be -1000 instead of -1000px). This updated code correctly reproduces the problem:

#container {
    position: relative;
    width:   500px;
    height:  500px;
    z-index: -1000;
}

#drag {
    position: absolute;
    top: 0;
    left: 0;
    background-color: red;
}

#drop {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: blue;
}

...

<div id="container">
    <div id="drag"></div>
    <div id="drop"></div>
</div>

...

$(document).ready(function() {
    $('#drag').draggable();
    $('#drop').droppable();
}

[godfreykfc]

Obviously you'll need to give it a width/height too:

#drag {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
    background-color: red;
}

#drop {
    position: absolute;
    width: 100px;
    height: 100px;
    bottom: 0;
    right: 0;
    background-color: blue;
}

Sorry for the confusion..

[paul]

Almost all browsers handle negative z-indexes differently, and all are buggy. It's impossible to work around this - try simply dragging the red box without even calling draggable() - it will always scroll down in Safari, for instance. So the only option is not to use negative z-indexes.