JQuery拖拽+自由落体实现

最新推荐文章于 2026-01-09 21:00:00 发布
原创最新推荐文章于 2026-01-09 21:00:00 发布 · 953 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#jquery #function #xhtml #class #html #null
原创专栏收录该内容
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>
<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>