JavaScript div层拖拽左右移动

<!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=utf-8" /> 
<title>拖动DIV</title> 
<style type="text/css"> 
.show{
	background:#7cd2f8;
	width:100%;
	height:100px;
	text-align:center;
	left:0px;
	top:0px;
	z-index:10;
	margin-bottom: 5px;
}
.divLeft, .divRight{
	width:58%; height: 500px; float: left;
}
.divRight{
	width:38%; height: 500px; float: left;
}
</style>  
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript">

var tdiv;
var node= ".show";
var ao = null;
var draggedFlag=0;  //鼠标在拖动状态,0:未初始化 1:准备阶段,2:拖动阶段
var parentDiv=null;

function SectionMousedown(e){
	
	ao = e.srcElement;
	parentDiv=ao.parentNode;
	draggedFlag=1;
	
	tdiv = document.createElement("div");
	//tdiv.setAttribute("id","itemdiv");
	tdiv.innerHTML = ao.outerHTML;
	tdiv.style.display = "block";
	tdiv.style.position = "absolute";
	tdiv.style.filter = "alpha(opacity=70)";
	tdiv.style.cursor = "move";
	tdiv.style.zIndex = 12;
	
	tdiv.style.width = ao.offsetWidth+"px"; //被移动table对象的高度
	tdiv.style.height = ao.offsetHeight+"px";
	tdiv.style.top = (getInfo(ao).top+0)+"px";
	tdiv.style.left = getInfo(ao).left+"px";
	document.body.appendChild(tdiv);
	//鼠标按下时该鼠标所在的位置
	lastX = event.clientX;
	lastY = event.clientY;
	//tdiv的位置
	lastLeft = tdiv.style.left;
	lastTop = tdiv.style.top;
	//alert(lastLeft +' '+lastTop);
	$(tdiv).css("cursor", "move");
	try {
	//	tdiv.dragDrop(); //初始化拖曳事件
	} catch (e) {} 
	
	//this表示原来的div
	var offset = $(this).offset(); //DIV在页面的位置
	var x = e.pageX - offset.left; //获得鼠标指针离DIV元素左边界的距离
	var y = e.pageY - offset.top; //获得鼠标指针离DIV元素上边界的距离
	//alert(x+' '+y);
	$(document).bind("mousemove", function (ev) //绑定鼠标的移动事件,因为光标在DIV元素外面也要有效果,所以要用doucment的事件,而不用DIV元素的事件
	{	
		if(tdiv!=null){
			draggedFlag=2;
			$(tdiv).stop(); //加上这个之后
			var _x = ev.pageX - x; //获得X轴方向移动的值
			var _y = ev.pageY - y; //获得Y轴方向移动的值
			document.getElementById("seatX").value=ev.pageX;
			
			document.getElementById("seatY").value=ev.pageY;
			$(tdiv).animate({
				left :_x + "px",
				top : _y + "px"
			}, 10);
		}
	});
}


$(document).ready(function () {

	var partR=document.getElementById("partR");
	var partL=document.getElementById("partL");
	for(var i=0;i<partR.children.length;i++){
		var sectionR=partR.children[i];
		$(sectionR).mousedown(SectionMousedown);
	}
	for(var i=0;i<partL.children.length;i++){
		var sectionL=partL.children[i];
		$(sectionL).mousedown(SectionMousedown);
	}


	$(document).mouseup(function (e) {

		//如果当前div位置小于0,将该div置于位置0处
		var offset = $(node).offset(); //DIV在页面的位置
		var x = offset.left; //获得鼠标指针离DIV元素左边界的距离
		var y =  offset.top; //获得鼠标指针离DIV元素上边界的距离
		
		
		if(draggedFlag==0){ //未初始化阶段,放下鼠标
			
		}else if(draggedFlag==1){	//准备阶段,放下鼠标
			tdiv.style.cursor = "default";
			draggedFlag=0;
			document.body.removeChild(tdiv);
			tdiv=null;
		}else if(draggedFlag==2){	//拖动阶段,放下鼠标
			draggedFlag=0;
			tdiv.style.cursor = "default";
			$(tdiv).css("cursor", "default");	//鼠标指针变回原来默认形状
			
			//取得tdiv中的子结点
			var tchild=tdiv.children[0];
			$(document).unbind("mousemove");//解除绑定鼠标移动事件
			
			//鼠标松开时的位置
			var _x=e.pageX;		
			var _y=e.pageY;
			var st_t=tdiv.children[0];
			$(st_t).mousedown(SectionMousedown);
			
			//松开鼠标时鼠标在左边,右边加上该结点
			if(mouseOnLeft(_x,_y)){
				partL.appendChild(st_t);
				parentDiv.removeChild(ao);
			}else
			//松开鼠标时在鼠标位置在右边,右边加上该结点
			if(mouseOnRight(_x,_y)){
				partR.appendChild(st_t);
				parentDiv.removeChild(ao);
			}else{//松开鼠标时鼠标在其他位置,
			}
			document.body.removeChild(tdiv);
			tdiv=null;
			ao = null;
			st_t=null;
			parentDiv=null;
			//nodeAnimate(x,y);
		}
		

	});
})

function nodeAnimate(x,y){
	if(x<0) x=0;
	if(y<0) y=0;
	$(node).animate({
		left : x + "px",
		top : y + "px"
	}, 1001);	
}


//返回true/false。判断鼠标在右边
function mouseOnRight(x,y){
	//鼠标松开时的位置
	//var x=e.pageX;		
	//var y=e.pageY;
	//右边框子的大小位置
	var partR=document.getElementById("partR");
	
	var divx1 = partR.offsetLeft; 
	var divy1 = partR.offsetTop; 
	var divx2 = partR.offsetLeft + partR.offsetWidth; 
	var divy2 = partR.offsetTop + partR.offsetHeight;  
	//alert(divx1+' '+divy1+' '+divx2+' '+divy2+' ');
	document.getElementById("seatZ").value=divx1+' '+divy1+' '+divx2+' '+divy2+' ';
	//if( x <= divx2 && x >= divx1 && y <= divy2 && y >= divy1){ 
	if( x >= divx1 ){ 
		return true; 
	}else
		return false;
	
}
//返回true/false  判断鼠标在左边
function mouseOnLeft(x,y){
	//鼠标松开时的位置
	//var x=e.pageX;		
	//var y=e.pageY;
	//右边框子的大小位置
	var partL=document.getElementById("partL");
	
	var divx1 = partL.offsetLeft; 
	var divy1 = partL.offsetTop; 
	var divx2 = partL.offsetLeft + partL.offsetWidth; 
	var divy2 = partL.offsetTop + partL.offsetHeight;  
	//alert(divx1+' '+divy1+' '+divx2+' '+divy2+' ');
	if(x < divx2){ 
		return true; 
	}else
		return false;
	
}
function getInfo(o) { //取得对象的绝对坐标
	var to = new Object();
	to.left = to.right = to.top = to.bottom = 0;
	var twidth = o.offsetWidth;
	var theight = o.offsetHeight;
	while (o != document.body) {
		to.left += o.offsetLeft;
		to.top += o.offsetTop;
		o = o.offsetParent;
	}
	to.right = to.left + twidth;
	to.bottom = to.top + theight;
	return to;
}
</script> 
</head> 
<body>
<input type = "button"  onclick="aaa();" value="Click Me" />
<input type = "text"   id="seatX" />
<input type = "text="  id="seatY" />
<input type = "text="  id="seatZ" />
<br /><br />
<div  style="width:100%; height: 500px; border-color: #FF0000; border: 5px;"   >
  
    <!--jquery实现DIV层拖-->
    <div  id="partL" class="divLeft" >
      	
      	<div id="st1" class="show"> 
			jquery实现DIV层拖动1	  
		</div> 
      	<div id="st2" class="show"> 
			jquery实现DIV层拖动	2  
		</div> 
		<div id="st3" class="show"> 
			jquery实现DIV层拖动3	  
		</div> 
      	<div id="st4" class="show"> 
			jquery实现DIV层拖动	4  
		</div> 
		
    </div>
	<div style="width:1%; height: 500px; float: left; border-right-color: #00FF33; background-color: #00FF00;"></div>
    <div id="partR" class="divRight" >
      	<div id="st5" class="show"> 
			jquery实现DIV层拖动	5  
		</div> 
      
    </div>
</div>
</div>
<!--jquery实现DIV层拖-->
</body> 
<script type="text/javascript">
function aaa() {
 alert(getOs())
}

function getOs()  
{  
    var OsObject = "";  
   if(!!window.ActiveXObject || "ActiveXObject" in window) {  
        return "MSIE";  
   }  
   if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){  
        return "Firefox";  
   }
   if(isChrome=navigator.userAgent.indexOf("Chrome")>0) {  
        return "Chrome";  
   }
   if(isSafari=navigator.userAgent.indexOf("Safari")>0) {  
        return "Safari";  
   }   
}


</script>
</html> 

用文件保存该代码即可执行,需要引入jquery.js文件,花了我两天时间才做成,不过还有待改进。

可以兼容IE9到IE11,谷歌浏览器,火狐暂时不兼容,页面底下包括浏览器判断,,读者可以依此去想办法兼容其他浏览器



阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页