parent droppable of a draggable gets drop event when the draggable is outside of the droppable
hi,
I have a draggable div and its parent droppable div. The droppable
gets drop event independent on where the draggable is dropped. If the
draggable is dropped on the droppable it gets 'drop' event twice.
Is it expected behavior or am I doing something wrong?
The following is the example of the described. Just drag the blue
rectangle.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
.container{width: 100; height: 100; background-color: red;
border: 1px solid black;}
.item{width: 20; height: 20; background-color: blue; border:
1px solid black;}
</style>
<script type="text/javascript" src="js/jquery-1.2.1.js"></
script>
<script type="text/javascript" src="js/jquery.dimensions.js"></
script>
<script type="text/javascript" src="js/ui.mouse.js"></script>
<script type="text/javascript" src="js/ui.resizable.js"></
script>
<script type="text/javascript" src="js/ui.draggable.js"></
script>
<script type="text/javascript" src="js/ui.draggable.ext.js"></
script>
<script type="text/javascript" src="js/ui.droppable.js"></
script>
<script type="text/javascript" src="js/ui.droppable.ext.js"></
script>
<script type="text/javascript">
$(document).ready(function(){
$('.item').draggable();
$('.container').droppable({
accept : '.item',
tolerance : 'fit',
drop : function (e, ui){$(this).append('dropped<br/