jQuery写的一个拖拽效果

最新推荐文章于 2024-04-25 14:39:56 发布

原创最新推荐文章于 2024-04-25 14:39:56 发布 · 688 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #xhtml #class #border #html

原创专栏收录该内容

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</title>
<script type="text/javascript" src="jquery-1.6.3.js"></script>
<script type="text/javascript">
var drag=new dragMing(".drag");
var drg1=new dragMing(".drag1");
function dragMing(idORclass){
   var dragObj=this;
   this.idORclass=idORclass;
   this.deltaX=0;
   this.deltaY=0;
   this.runMove=function(e){
                   dragObj.dragMove(e);
				   return false;
                }
   this.runStop=function(e){
                  dragObj.dragStop(e);
				  return false; 
                }
   this.dragStart=function(dragEvent){
   
         dragObj.deltaX=dragEvent.clientX-$(dragObj.idORclass).offset().left;
		 dragObj.deltaY=dragEvent.clientY-$(dragObj.idORclass).offset().top;
   //PS：这里用document很关键。如果你用的还是像别的一样$(dragObj.idORclass),拖动时会
   //    一卡卡的，因为拖动的物体可能跟不上你鼠标的移动速度。
		 $(document).bind("mousemove",dragObj.runMove);  
		 $(document).bind("mouseup",dragObj.runStop);
   }
   this.dragMove=function(dragEvent){
         $(dragObj.idORclass).css({
		                             "left":(dragEvent.clientX-dragObj.deltaX)+"px",
									 "top" :(dragEvent.clientY-dragObj.deltaY)+"px",
		                          })  
   }
   this.dragStop=function(dragEvent){
         $(document).unbind("mousemove",dragObj.runMove);
		 $(document).unbind("mouseup",dragObj.runStop);
   }
   this.runDrag=function(idORclass,func){
		   $(document).ready(function(){
				 $(idORclass).bind("mousedown",function(e){
					func(e)
					return false;
				 });   
		   })
	}
	dragObj.runDrag(this.idORclass,this.dragStart);
}
</script>
</head>
<style type="text/css">

.drag{
position:absolute;
width:100px;
height:100px;
background-color:#00FF00;
border:5px;

}
.drag1{
position:absolute;
width:100px;
height:100px;
left:300px;
background-color:#00FF00;

}
</style>
<body>
<div class="drag">drag me</div>
<div class="drag1">drag me</div>
</body>
</html>

拖拽的详细介绍可以看大神的 http://topic.youkuaiyun.com/u/20081117/10/d44871af-3480-4ae0-aa02-e3ab334562bc.html?42707