Drag within nested div

Drag within nested div

Hello,
I've run into big trouble when I want to drag some element nested in several div's

the configuration looks like the following

<script type="text/javascript">
         $(function(){
            $("#draggable3").draggable();
            $("#draggable5").draggable();
         });
</script>   

<div id="draggable3" style="width:800px; height:600px; border-width: 1px; border-style:solid; z-index: 1000; background-color: transparent">
         <div id="draggable4" style="width:800px; height:600px; border-width: 1px; border-style:solid; z-index: -1; background-color: yellow">
            <div id="draggable5" style="width:30px; height:30px; border-width: 1px; border-style:solid; z-index: 1000; background-color: transparent">
               <div id="draggable6" style="width:30px; height:30px; border-width: 1px; border-style:solid; z-index: -1; background-color: red">
               </div>
            </div>
         </div>
      </div>   


This works well in firfox, but in IE7, if I drag the div
draggable5,
both draggable3 and draggable5 moves (in different speed!)

appreciate for any suggestion!

and sorry for my poor English.

Thanks!