JQuery的scroll和draggable有关问题 _JavaScript

JQuery的scroll和draggable问题
谁来帮我看看，为什么我的代码里在拖动选项时，在IE 6和8下被拖动的项目和鼠标的位置总是错位的（Firefox没有任何问题，但是用户坚持一定要在IE下运行正确）。妈妈的弄了两天了都弄不好。

注意：根据客户的要求，我的draggable区域必须支持拖动，而且必须支持滚动条。

HTML code


<html>

<head>
<title></title>

<script src="js/jquery.js"></script>
<script src="js/jquery.dimensions.js"></script>
<script src="js/ui/ui.mouse.js"></script>
<script src="js/ui/ui.draggable.js"></script>
<script src="js/ui/ui.draggable.ext.js"></script>
<script src="js/ui/ui.droppable.js"></script>
<script src="js/ui/ui.droppable.ext.js"></script>
<script src="js/ui/ui.sortable.js"></script>
</head>

<style>
.title {
font-weight:bold;
font-size:12px;
height:17px;
padding:5px 5px 0px 25px;
background:url(../images/titlebg.gif);

border-bottom:1px solid #abc1dd;
float:left;
}

.item {
    font-weight:bold;
    font-size:12px;
    height:17px;
    width:300px;
    border-bottom:1px solid #abc1dd;
    float:left;
}

.receive {
     height: 200px;
    width: 300px;
    overflow-x: hidden;
    overflow-y:    auto;
    float:left;
    
}

.navitem {
    font-weight:bold;
    font-size:12px;
    height:17px;
    width:300px;
    border-bottom:1px solid #abc1dd;
    float:left;
}
</style>



<body>
    <div style="height:600px; width:100%;">
           <div class="receive">
                   <div class="navitem" id="onboard">登机人员</div>
               </div> 
                    
              <div style="overflow-y:auto; overflow-x:hidden; width:300px; height:100px;">
                    <div class="item" id="1">aaa</div>
                    <div class="item" id="2">bbb</div>
                    <div class="item" id="3">ddd</div>
                    <div class="item" id="4">eee</div>
                    <div class="item" id="5">fff</div>
                    <div class="item" id="6">ggg</div>
                    <div class="item" id="7">hhh</div>
                    <div class="item" id="8">iii</div>
                    <div class="item" id="9">jjj</div>
                    <div class="item" id="10">kkk</div>
                    <div class="item" id="11">lll</div>
                    <div class="item" id="12">mmm</div>
                    <div class="item" id="13">nnn</div>
                    <div class="item" id="14">ooo</div>
                    <div class="item" id="15">ppp</div>
                    <div class="item" id="16">qqq</div>
                    <div class="item" id="17">rrr</div>
                    <div class="item" id="18">sss</div>
            </div>  
     </div>
    
    
</body>
</html>

<script language="javascript">
  var elem = '';
  $(document).ready(function(){
    
    $(".item").draggable({
    helper: 'clone',
    opacity: 0.55,
    start:function(e, ui)
    {
        elem = e.srcElement || e.target;
    }
    });
  });
  
  $(".receive").droppable({
    accept: ".item",
    activeClass: 'droppable-active',
    hoverClass: 'droppable-hover',
    drop: function(ev, ui) 
    {
        var o = elem.innerHTML;
        var oid = o;
        var sid = "s" + oid;       
        
        //有相同的就不插入了。
        if ( document.getElementById(sid) == null)
        {
            $(this).append( "<div id='" + sid + "' title='"+ o +"' class='navitem'>" +  o + "<a href='#' onclick='javascript:$(this.parentNode).remove();' title='删除此栏'> X</a></div>" );
            
        }else     {
        
        
        alert ("您已经添加了这个栏目，请您删除后再添加，谢谢！")

        } 
    }
    
});
  

</script>