#6928 closed bug (notabug)

Opened February 03, 2011 05:14AM UTC

Closed February 03, 2011 12:56PM UTC

hidden droppable gets drop, not top most droppable

Reported by: randynwalsh Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.droppable Version: 1.8.9
Keywords: Cc:
Blocked by: Blocking:
Description

Here, the outterDiv (background-color: fuscha) always gets the drop, even though the inner div has a higher z-index and is overlay ontop.

<html>

<head>

<title></title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/vader/jquery-ui.css" rel="stylesheet" type="text/css" />

<script language="Javascript" type="text/javascript">

$(function () {

$('.draggable').draggable();

$('.droppable').droppable({

drop: function (event, ui) {

$('#status').append('Dropped on ' + $(this).css('background-color') + '<br />');

}

});

})

</script>

</head>

<body>

<div id="outterDiv" class="droppable" style="height: 500px; width: 50%; background-color: Fuchsia; z-index: 200;">

<div class="draggable" style="position: absolute; top: 50px; left: 50px; width: 100px; background-color: Green; z-index: 1000;">

Hey! Drag me :)

</div>

</div>

<div class="droppable" style="position: absolute; top: 100px; left: 100px; width: 25%; height: 200px; background-color: Blue; z-index: 400;">

</div>

<div id="status" style="background-color: Gray; width: 50%; height:100px; overflow:auto;">

</div>

</body>

</html>

Attachments (0)
Change History (1)

Changed February 03, 2011 12:56PM UTC by scottgonzalez comment:1

component: ui.core → ui.droppable
resolution: → invalid
status: new → closed

We don't support stacked droppables. See also #3452.