I have a unexpected behavior with the following code :

2. <style>
3.         div
4.         {
5.             margin: 10px;
6.         }
7.         .droppable
8.         {
9.             background-color: red;
10.         }
11.         .draggable
12.         {
13.             background-color: green;
14.         }
15.     </style>
16.     <div id="divContainer" style="height: 100px; overflow: auto;">
17.         <div id="drop1" class="droppable" style="height: 500px">
18.         </div>
19.     </div>
20.     <div id="drop2" class="droppable" style="height: 50px;">
21.     </div>
22.     <div class="draggable" style="height: 50px;">
23.     </div>
24.     <script type="text/javascript">
25.         $('.draggable').draggable();
26.         $('.droppable').droppable({ drop: function (event, ui) { $(this).text('dropped'); } });
27.     </script>

When I drag the green div on the red div with id='drop2', the text 'dropped' is display on the div with id='drop1'.
Is it correct or is it a bug ? If it's normal, what changes can I make to fire the event on the div 'drop2'  and not on 'drop1' ?

I'm using jquery 1.4.2, jquery ui 1.8.2. I tested on IE8 and Chrome 5.0 beta.

Thanks for your help.