#4461 closed bug (wontfix)

Opened April 13, 2009 03:22PM UTC

Closed August 22, 2009 08:25AM UTC

Last modified May 26, 2010 05:40PM UTC

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

Reported by: godfreykfc Owned by:
Priority: major Milestone: 1.8
Component: ui.draggable Version: 1.7.1
Keywords: draggable droppable negative z-index zindex Cc:
Blocked by: Blocking:
Description

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();
}
Attachments (0)
Change History (4)

Changed April 13, 2009 07:35PM UTC by godfreykfc comment:1

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();
}

Changed April 16, 2009 01:49AM UTC by godfreykfc comment:2

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..

Changed April 17, 2009 03:13AM UTC by scottgonzalez comment:3

milestone: TBD → 1.8

Changed August 22, 2009 08:25AM UTC by paul comment:4

resolution: → wontfix
status: new → closed

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.