一个很蛋疼的问题，不嫌麻烦的。麻烦看看。。。。谢谢！！

我用Jquery写了个，拖拽加自由落体的程序。
     IE8里实现的效果是我想达到的就是mousedown时间可以立刻终止运动，然后开始拖拽，mouseup后再开始只有落体。
     FF和Chrome里都出现一个问题是：——“当我mousedown了，可以进行拖拽，这都很正常。但mouseup后物体会继续mousedown前的运动。没有像我我设想的那样立刻重新开始下落。要过一段时间才能停止。”
     你们可以分别用Chrome和ie8试试就知道我说的问题了。
     当你第一次mouseup后不要执行任何操作，在IE8下数字的运动和物体的运动是同步进行的，而在FF和Chrome下都是不同步的。我分析这也就是我提出的问题的关键所在。setInterval()，clearInterval和animate()都可能是引起此问题的原因。有谁知道这3个函数在不同浏览器中的实现有什么不同吗？或者有什么更好的方法来避免FF和Chrome中的问题？
    问题很长~~~~~~~~~真心求教！
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>drag+drop</title>
<script type="text/javascript" src="jquery-1.6.3.js"></script>
<script type="text/javascript">
function GravityObj(idORclass){
     var obj=this;
 this.idORclass=idORclass;
     this.velocity=1000;
 this.gravity=1000;
 this.longTopx=0.0003;
 this.stopNow=null;
 this.bottom=0;
 this.tAnimate=1;
 this.hit=0.9;
 this.deltaX=0;
 this.deltaY=0;
 this.helpStop=false;
 function dragStart(dragEvent){
 obj.deltaX=dragEvent.clientX-$(obj.idORclass).offset().left;
 obj.deltaY=dragEvent.clientY-$(obj.idORclass).offset().top;
//****************************PS：这里用document很关键。如果你用的还是像别的一样$(dragObj.idORclass),拖动时会
//*******************************一卡卡的，因为拖动的物体可能跟不上你鼠标的移动速度。
                             $(obj.idORclass).unbind("mouseup");
 $(document).bind("mousemove",dragMove);  
 $(obj.idORclass).bind("mouseup",dragStop);
 $(obj.idORclass).bind("mouseup",dropStart);                            
 }
 function dragMove(dragEvent){
                         $(obj.idORclass).css({
 "left":(dragEvent.clientX-obj.deltaX)+"px",
 "top" :(dragEvent.clientY-obj.deltaY)+"px",
                                          }) 
 }
 function dragStop(){
                        // alert("dragStop");
 $(document).unbind("mousemove",dragMove);
 $(obj.idORclass).unbind("mouseup",dragStop);
 var rBottom=getBottom(obj.idORclass);
 $(obj.idORclass).css("top","auto");
 $(obj.idORclass).css("bottom",rBottom+"px");
 obj.bottom=rBottom;
 obj.velocity=0;
// alert(rBottom);
 }
 function dropStart(){
                         //alert("dropStart"+obj.idORclass);
 //event.stopPropagation();
 //alert(obj.bottom);
 //alert(obj.velocity);
 dropMove();
 $(obj.idORclass).unbind("mouseup",dropStart);
 }
 function dropMove(){
                         obj.stopNow=setInterval(dropAction(),obj.tAnimate);
 }
 function dropStop(){
                         //alert("dropStop"+obj.idORclass);
 clearInterval(obj.stopNow);
 return
 }
 function getBottom(idORclass){
 return rBottom=document.documentElement.clientHeight-$(idORclass).offset().top-parseInt($(idORclass).css("height"));
 }
 function dropAction(){
     return function(){
 var positionChange=(obj.velocity*obj.tAnimate+(1/2)*obj.gravity*obj.tAnimate*obj.tAnimate)*obj.longTopx;  obj.velocity=obj.velocity+obj.gravity*obj.tAnimate;       //v=v0+gt
 obj.bottom=obj.bottom-positionChange;
 var endbottom=5;
 if(obj.bottom<=endbottom){
  obj.velocity=(0-obj.velocity)*obj.hit;                  //碰撞后速度的变化
  if (Math.abs(obj.velocity)<=100){
 dropStop();
 return;
  }
 }
 $("#output").html("速度"+obj.velocity+"高度"+obj.bottom);  
 $(obj.idORclass).animate({bottom:obj.bottom+"px"},obj.tAnimate);
     }
     }
 function mousedownBind(){
                     $(obj.idORclass).bind("mousedown",dragStart);
                     $(obj.idORclass).bind("mousedown",dropStop);
 }
 $(document).ready(function(){
                         mousedownBind();
 })
}
var obj1=new GravityObj(".gravity1");
var obj2=new GravityObj(".gravity2");
</script>
<style type="text/css">
body{
margin:0;
padding:0;
}
.gravity1{
height:100px;
width:100px;
background-color:#000066;
position:absolute;
cursor:pointer;
}
.gravity2{
height:100px;
width:100px;
right:200px;
background-color:red;
position:absolute;
cursor:pointer;
}</style>
</head><body>
<div class="gravity1"></div>
<div class="gravity2"></div>
<span id="output"></span>
</body>
</html>

解决方案 »

  1.   

    源代码在：http://blog.csdn.net/notcharming/article/details/6945699看会比较清晰
      

  2.   

    原来可以这样插入源代码。。<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>drag+drop</title>
    <script type="text/javascript" src="jquery-1.6.3.js"></script>
    <script type="text/javascript">
    function GravityObj(idORclass){
         var obj=this;
     this.idORclass=idORclass;
         this.velocity=1000;
     this.gravity=1000;
     this.longTopx=0.0003;
     this.stopNow=null;
     this.bottom=0;
     this.tAnimate=1;
     this.hit=0.9;
     this.deltaX=0;
     this.deltaY=0;
     this.helpStop=false;
     function dragStart(dragEvent){
     obj.deltaX=dragEvent.clientX-$(obj.idORclass).offset().left;
     obj.deltaY=dragEvent.clientY-$(obj.idORclass).offset().top;
    //****************************PS：这里用document很关键。如果你用的还是像别的一样$(dragObj.idORclass),拖动时会
    //*******************************一卡卡的，因为拖动的物体可能跟不上你鼠标的移动速度。
                                 $(obj.idORclass).unbind("mouseup");
     $(document).bind("mousemove",dragMove);  
     $(obj.idORclass).bind("mouseup",dragStop);
     $(obj.idORclass).bind("mouseup",dropStart);                            
     }
     function dragMove(dragEvent){
                             $(obj.idORclass).css({
     "left":(dragEvent.clientX-obj.deltaX)+"px",
     "top" :(dragEvent.clientY-obj.deltaY)+"px",
                                              }) 
     }
     function dragStop(){
                            // alert("dragStop");
     $(document).unbind("mousemove",dragMove);
     $(obj.idORclass).unbind("mouseup",dragStop);
     var rBottom=getBottom(obj.idORclass);
     $(obj.idORclass).css("top","auto");
     $(obj.idORclass).css("bottom",rBottom+"px");
     obj.bottom=rBottom;
     obj.velocity=0;
    // alert(rBottom);
     }
     function dropStart(){
                             //alert("dropStart"+obj.idORclass);
     //event.stopPropagation();
     //alert(obj.bottom);
     //alert(obj.velocity);
     dropMove();
     $(obj.idORclass).unbind("mouseup",dropStart);
     }
     function dropMove(){
                             obj.stopNow=setInterval(dropAction(),obj.tAnimate);
     }
     function dropStop(){
                             //alert("dropStop"+obj.idORclass);
     clearInterval(obj.stopNow);
     return
     }
     function getBottom(idORclass){
     return rBottom=document.documentElement.clientHeight-$(idORclass).offset().top-parseInt($(idORclass).css("height"));
     }
     function dropAction(){
         return function(){
     var positionChange=(obj.velocity*obj.tAnimate+(1/2)*obj.gravity*obj.tAnimate*obj.tAnimate)*obj.longTopx;
       //  ds=v0*t+(1/2)g(t^2)  
     obj.velocity=obj.velocity+obj.gravity*obj.tAnimate;       //v=v0+gt
     obj.bottom=obj.bottom-positionChange;
     var endbottom=5;
     if(obj.bottom<=endbottom){
      obj.velocity=(0-obj.velocity)*obj.hit;                  //碰撞后速度的变化
      if (Math.abs(obj.velocity)<=100){
     dropStop();
     return;
      }
     }
     $("#output").html("速度"+obj.velocity+"高度"+obj.bottom);  
     $(obj.idORclass).animate({bottom:obj.bottom+"px"},obj.tAnimate);
         }
         }
     function mousedownBind(){
                         $(obj.idORclass).bind("mousedown",dragStart);
                         $(obj.idORclass).bind("mousedown",dropStop);
     }
     $(document).ready(function(){
                             mousedownBind();
     })
    }
    var obj1=new GravityObj(".gravity1");
    var obj2=new GravityObj(".gravity2");
    </script>
    <style type="text/css">
    body{
    margin:0;
    padding:0;
    }
    .gravity1{
    height:100px;
    width:100px;
    background-color:#000066;
    position:absolute;
    cursor:pointer;
    }
    .gravity2{
    height:100px;
    width:100px;
    right:200px;
    background-color:red;
    position:absolute;
    cursor:pointer;
    }</style>
    </head><body>
    <div class="gravity1"></div>
    <div class="gravity2"></div>
    <span id="output"></span>
    </body>
    </html>