JQuery的scroll和draggable问题

谁来帮我看看，为什么我的代码里在拖动选项时，在IE 6和8下被拖动的项目和鼠标的位置总是错位的（Firefox没有任何问题，但是用户坚持一定要在IE下运行正确）。妈妈的弄了两天了都弄不好。注意：根据客户的要求，我的draggable区域必须支持拖动，而且必须支持滚动条。
<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>

解决方案 »

  1.   

    JQuery的拖动就一个方法啊，你写的这么复杂啊
      

  2.   

    没有很复杂啊，我只不过把html整个页都贴进来了而已，其实负责拖动的js代码很简单的。<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>就这么点儿而已。
      

  3.   

    我之前用drag的时候也会有点移位。如果不用那么复杂的div和布局的话，用draggable应该不会有什么大问题。那就是你布局引起的。你可以尝试着修改你的css，尽量避免overflow之类的。实在不行在ie下面可以在每次拖动之前alert出x，y坐标，可以通过修改x，y坐标的偏移量来完成微调，做起来也很简单。
      

  4.   

    我靠，问题解决了，方法非常地莫名其妙了，我在整个HTML页面的顶端加上了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">然后刷新页面，一切都正常了。诶......看来还是我的基础知识不足啊，忽略了这一块儿知识
      

  5.   

    XHTML Transitional DTD
    Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表（CSS）的浏览器以至于您不得不使用 XHTML 的呈现特性时，请使用此类型：
    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">太烦了，这些东西