Search and Top Navigation
#4816 closed bug (worksforme)
Opened August 30, 2009 11:42AM UTC
Closed October 29, 2012 03:52AM UTC
A disabled greedy droppable child prevents a drop on the parent element
| Reported by: | erikkallen | Owned by: | |
|---|---|---|---|
| Priority: | major | Milestone: | 2.0.0 |
| Component: | ui.droppable | Version: | 1.7.2 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
If there is a disabled greedy drop target, draggables within this area will not be dropped on the enabled parent element.
Repro steps:
In the following document, drop the red div on the blue one.
Actual behavior: No drop message.
Expected behavior: An alert saying "Outer".
Fix: in ui.droppable._drop (line 1386 in my source file), change
this.element.find(":data(droppable)").not(".ui-draggable-dragging").each(function() {
to
this.element.find(":data(droppable)").not(".ui-draggable-dragging,.ui-droppable-disabled").each(function() {
TEST DOCUMENT:
<div id="drag" style="width: 30px; height: 30px; background-color: Red;">x</div>
<div id="outer" style="padding: 50px; background-color: Green">
<div id="inner" style="width: 100px; height: 100px; background-color: Blue; filter: Alpha(Opacity=100); opacity: 1">
x
</div>
</div>
<script type="text/javascript" language="javascript">
$(function() {
$('#outer').droppable({ drop: function() { alert("Outer"); } });
$('#inner').droppable({ drop: function() { alert("Inner"); }, greedy: true });
$('#inner').droppable('disable');
$('#drag').draggable({revert: true });
});
</script>
Attachments (0)
Change History (4)
Changed August 30, 2009 02:47PM UTC by comment:1
| component: | ui.core → ui.droppable |
|---|---|
| milestone: | TBD → 1.8 |
| priority: | minor → major |
Changed October 11, 2012 02:49PM UTC by comment:2
| milestone: | 1.9.0 → 2.0.0 |
|---|
Changed October 29, 2012 03:50AM UTC by comment:3
| description: | If there is a disabled greedy drop target, draggables within this area will not be dropped on the enabled parent element. \ \ Repro steps: In the following document, drop the red div on the blue one. \ \ Actual behavior: No drop message. \ Expected behavior: An alert saying "Outer". \ \ Fix: in ui.droppable._drop (line 1386 in my source file), change \ \ this.element.find(":data(droppable)").not(".ui-draggable-dragging").each(function() { \ \ to \ \ this.element.find(":data(droppable)").not(".ui-draggable-dragging,.ui-droppable-disabled").each(function() { \ \ \ TEST DOCUMENT: \ \ <div id="drag" style="width: 30px; height: 30px; background-color: Red;">x</div> \ <div id="outer" style="padding: 50px; background-color: Green"> \ <div id="inner" style="width: 100px; height: 100px; background-color: Blue; filter: Alpha(Opacity=100); opacity: 1"> \ x \ </div> \ </div> \ \ <script type="text/javascript" language="javascript"> \ $(function() { \ $('#outer').droppable({ drop: function() { alert("Outer"); } }); \ $('#inner').droppable({ drop: function() { alert("Inner"); }, greedy: true }); \ $('#inner').droppable('disable'); \ $('#drag').draggable({revert: true }); \ }); \ </script> \ → If there is a disabled greedy drop target, draggables within this area will not be dropped on the enabled parent element. \ \ Repro steps: \ In the following document, drop the red div on the blue one. \ Actual behavior: No drop message. \ Expected behavior: An alert saying "Outer". \ \ Fix: in ui.droppable._drop (line 1386 in my source file), change \ {{{ \ this.element.find(":data(droppable)").not(".ui-draggable-dragging").each(function() { \ }}} \ to \ {{{ \ this.element.find(":data(droppable)").not(".ui-draggable-dragging,.ui-droppable-disabled").each(function() { \ }}} \ \ TEST DOCUMENT: \ {{{ \ <div id="drag" style="width: 30px; height: 30px; background-color: Red;">x</div> \ <div id="outer" style="padding: 50px; background-color: Green"> \ <div id="inner" style="width: 100px; height: 100px; background-color: Blue; filter: Alpha(Opacity=100); opacity: 1"> \ x \ </div> \ </div> \ \ <script type="text/javascript" language="javascript"> \ $(function() { \ $('#outer').droppable({ drop: function() { alert("Outer"); } }); \ $('#inner').droppable({ drop: function() { alert("Inner"); }, greedy: true }); \ $('#inner').droppable('disable'); \ $('#drag').draggable({revert: true }); \ }); \ </script> \ }}} |
|---|
Changed October 29, 2012 03:52AM UTC by comment:4
| resolution: | → worksforme |
|---|---|
| status: | new → closed |
Thanks for taking the time to contribute to the jQuery UI project! I can no longer reproduce the issue using the latest jQuery and jQuery UI. http://jsfiddle.net/dLUxS/
If you can still reproduce it, please feel free to reply to this ticket with a test case showing the problem. Thanks!