Opened 9 years ago

Closed 9 years ago

#6928 closed bug (notabug)

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>

Change History (1)

comment:1 Changed 9 years ago by Scott González

Component: ui.coreui.droppable
Resolution: invalid
Status: newclosed

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

Note: See TracTickets for help on using tickets.