Opened 11 years ago

Closed 10 years ago

Last modified 9 years ago

#4461 closed bug (wontfix)

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

Change History (4)

comment:1 Changed 11 years ago by 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();
}

comment:2 Changed 11 years ago by 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..

comment:3 Changed 11 years ago by Scott González

Milestone: TBD1.8

comment:4 Changed 10 years ago by paul

Resolution: wontfix
Status: newclosed

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.

Note: See TracTickets for help on using tickets.