|zyciis| 为什么我写的一个ＤＩＶ拖动效果，速度拖快了就不行，谢谢，有代码


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>    <script src="http://www.queness.com/resources/html/tabmenu/js/jquery-1.3.1.min.js" type="text/javascript"></script>    <script type="text/javascript">
        $(function()
        {
            $("#div1").mousedown(function(event)
            {
                var offset = $(this).offset();
                _x = event.clientX - offset.left;
                _y = event.clientY - offset.top;
                $("#div1").mousemove(function(event)
                {
                    _xx = event.clientX - _x;
                    _yy = event.clientY - _y;
                    this.style.left = _xx + "px";
                    this.style.top = _yy + "px";
                    return false;
                });
                return false;
            });
            $("#div1").mouseup(function()
            {
                $(this).unbind("mousemove");
                return false;
            });
        });
        
    </script></head>
<body>
    <div id="div1" style="position: absolute; width: 100px; height: 100px; background-color: Red">
    </div>
</body>
</html>谢谢

解决方案 »

  1.   

    本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/ws_hgo/archive/2009/11/25/4872458.aspx<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
      
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
        <title>JS拖动效果</title>  
        <mce:script type="text/javascript"><!--   
        function DragPanel(Panel,event)   
        {   
          var delayX=event.clientX-parseInt(Panel.style.left);   
          var delayY=event.clientY-parseInt(Panel.style.top);   
             
          document.attachEvent("onmousemove",HandleMove);   
          document.attachEvent("onmouseup",HandleUp);   
             
          event.cancelBubble=true;   
          event.returnValue=false;   
             
          function HandleMove(e)   
          {   
            e=window.event;   
            Panel.style.left=event.clientX-delayX+"px";   
            Panel.style.top=event.clientY-delayY+"px";   
            event.cancelBubble=true;   
          }   
          function HandleUp()   
          {   
            document.detachEvent("onmousemove",HandleMove);   
            document.detachEvent("onmouseup",HandleUp);   
          }   
           event.cancelBubble=true;   
        }   
           
    // --></mce:script>  
    </head>  
    <body>  
    <div style="position:absolute; width:200px; height:150px; left:100px; top:300px; background-color:Maroon;">  
    <div style="background-color:Red;" mce_style="background-color:Red;" onmousedown="DragPanel(this.parentNode,event)">Drag Me</div>  
    </div>  
    </body>  
    </html>  
      

  2.   

    //在mousemove事件开头加上  this.setCapture();
      

  3.   

    用$(document).mousemove就不会有这种现象了
      

  4.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="http://www.queness.com/resources/html/tabmenu/js/jquery-1.3.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
    $(function(){
    var Drag = function(){
    var drager = $('#div1'), disX = 0, disY = 0, offset;
    var mouseMove = function(e){
    drager.css({'left':(e.clientX - disX) + 'px', 'top':(e.clientY - disY) + 'px'});
    };
    var mouseDown = function(e){
    offset = drager.offset();
    disX = e.clientX - offset.left;
    disY = e.clientY - offset.top;
    $(document).bind('mousemove', function(event){mouseMove(event);})
          .bind('mouseup', function(){$(this).unbind('mousemove').unbind('mouseup')}); };
    return {
    init: function(){
    this.bindEvents();
    },
    bindEvents: function(){
    drager.bind('mousedown', function(event){mouseDown(event);});
    drager.bind('mouseover', function(){$(this).css('cursor','pointer')});
    }
    }
    }();
    Drag.init();
    });       
        </script></head>
    <body>
        <div id="div1" style="position: absolute; width: 100px; height: 100px; background-color: Red">
        </div>
    </body>
    </html>
      

  5.   


    补充一下 #5 主要是为了自己练手.刚学JQ. 楼主主要的问题就是 应该将mousemove的事件 放在document上 那样就整个文档捕获了.
      

  6.   

    晕 我在6楼 不都给你解析了么 document绑上onmousemove