Div托拽移动

最新推荐文章于 2024-04-06 12:52:22 发布

大狗狗

最新推荐文章于 2024-04-06 12:52:22 发布

阅读量1.2k

点赞数

分类专栏： html css js 文章标签： div xhtml javascript function jquery ie

本文链接：https://blog.csdn.net/Win32FanEx/article/details/7969801

版权

html css js 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

基于Jquery的Div托拽移动方法。在IE6、IE8、Chrome、FireFox、Opera下测试通过。兼容性主要取决于代码中的两组变量：X,Y和offx,offy。谁有更佳的赋值方法，请指出来。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Div托拽移动-CSDN-win32fan</title>
  
<script language="javascript" src="js/jquery162.js"></script><!--我引用的jquery库，可用你自己的替代，无版本要求-->
<script language="javascript" type="text/javascript">
  
/*div托移动位置
 dragDiv jquery对象,实施托拽的div
 moveDiv jquery对象,被托拽的的div
 
 dragDiv可以是moveDiv的子元素,也可以等于moveDiv
 
 注意：需要指定xhtml文档类型,比如：
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 作者：win32fan QQ:184263203
*/
function Drag(dragDiv,moveDiv)
{
	var ie6 = false;
    if ($.browser.msie && $.browser.version == "6.0") {
		ie6 = true;
    }
	
	var dd = dragDiv;
	var md = moveDiv;
	
	var X;
	var Y;

	var offx = 0;
	var offy=0;
	
	var width;
	var height;
	var bodyw;
	var bodyh;
	
	var mgx;
	var mgy;
	
	var down = false;

	//absolute下可能因托拽而撑大body,所以非IE6之下用fixed。
	moveDiv.css("position",ie6 ? "absolute" : "fixed");
	
	dragDiv.bind("mousedown",function(evt){			  
		dd.css("cursor","move");
		evt=evt || window.event; 
		
		//X Y offx offy是托拽计算的核心，赋值方法要考虑兼容性，欢迎大家提出更好、更兼容的赋值法。
		X = evt.originalEvent.clientX;
		Y = evt.originalEvent.clientY;
		offx = X - parseInt(md.offset().left);
		offy = Y - parseInt(md.offset().top);

		mgx = parseInt(md.css("margin-left"));
		mgy = parseInt(md.css("margin-top"));
		
		width = md.width();
		height = md.height();
		
		bodyw = document.documentElement.clientWidth-16;
		bodyh = document.documentElement.clientHeight;
		
		down = true;
			
        inFstop(evt);    
        inFabort(evt);
	});

	dragDiv.bind("mouseup",function(evt){
		dd.css("cursor","default");
		down = false;
	});
	
	dragDiv.bind("mousemove",function(evt){							  
		evt=evt || window.event; 

		X = evt.originalEvent.clientX;
		Y = evt.originalEvent.clientY;
		
		if(!down){return;}
		
		var left = X - offx - mgx;
		var top = Y - offy - mgy;

		//发现光标如果进入了不可见区域（客户区以外），移动可能发生混乱,这里进行预防。
		if(X < 16 || X > bodyw - 16 || Y < 16 || Y > bodyh - 16){
			inFstop(evt); 
			inFabort(evt);
			return;
		}
		
		//防止i6下把body额外给撑大，因为IE6下只能用absolute，这种模式下被托动div其定位依靠文档中相邻对象，因而其大小也被计入文档大小。
		if(ie6 && (top <= 0 || left <= 0 || top + height >= bodyh || left + width >= bodyw )){
			inFstop(evt); 
			inFabort(evt);
			return;
		}

		md.css("left",left + "px");
		md.css("top",top + "px");
		inFstop(evt); 
		inFabort(evt);
	});
	
	//和inFabort都是为了协调本类的托拽操作和浏览器默认的托拽操作不冲突。
	function inFstop(evt){
		 var e=(evt)?evt:window.event;
		 if (window.event) {
		    e.cancelBubble=true;//ie下阻止冒泡
		 } else {
		    e.stopPropagation();//其它浏览器下阻止冒泡
		 }         
	} 
	
	function inFabort(e){
       if ( e && e.preventDefault ) 
        e.preventDefault(); 
       else 
        window.event.returnValue = false; 
	} 
}
</script>
</head>

<body>

<div id="dm" style='margin-top:50px;margin-left:100px;width:400px;height:400px;border:#000 solid 1px;'>
<div id="dd" style='width:400px;height:40px;line-height:40px;background-color:#3366FF;color:#FFFFFF;'> 点蓝色部分托拽移动</div>
</div>


<script language="javascript" type="text/javascript">
var d = new Drag($("#dd"),$("#dm"));
</script>
</body>
</html>