#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 14 years ago by
comment:2 Changed 14 years ago by
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 14 years ago by
Milestone: | TBD → 1.8 |
---|
comment:4 Changed 13 years ago by
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.
Note: See
TracTickets for help on using
tickets.
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: