js div可以移动

330546494

浏览: 69472 次

最近访客更多访客>>

zdyk

shun_liu

jwcgxj

q212212

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

第一种：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
 </head>
<style>
	#id1{position:relative;}
	#movediv{
		position:absolute;border:1px solid #000;
		cursor:pointer;
	}
</style>
 <script language="javascript" type="text/javascript">
    var _IsMousedown = 0;
    var _ClickLeft = 0;
    var _ClickTop = 0;
    function moveInit(divID,evt)
    {
		_IsMousedown = 1;
		if(getBrowserType() == "NSupport"){
			return;
		}
		var obj = getObjById(divID);
		if(getBrowserType() == "fox"){
			_ClickLeft = evt.pageX - parseInt(obj.style.left);
			_ClickTop = evt.pageY - parseInt(obj.style.top);
		}else{
			_ClickLeft = evt.x - parseInt(obj.style.left);
			_ClickTop = evt.y - parseInt(obj.style.top);
		}
	}
	function Move(divID,evt)
	{
		if(_IsMousedown == 0){
			return;
		}
		var objDiv = getObjById(divID);
		if(getBrowserType() == "fox"){
			objDiv.style.left = evt.pageX - _ClickLeft;
			objDiv.style.top = evt.pageY - _ClickTop;
		}
		else{
			objDiv.style.left = evt.x - _ClickLeft;
			objDiv.style.top = evt.y - _ClickTop;
		}
   }
   function stopMove()
   {
		_IsMousedown = 0;
   }
   function getObjById(id)
   {
		return document.getElementById(id);
   }
   function getBrowserType()
   {
		var browser=navigator.appName
		var b_version=navigator.appVersion
		var version=parseFloat(b_version)
		//alert(browser);
		if ((browser=="Netscape")){
			return "fox";
		}else if(browser=="Microsoft Internet Explorer"){
			if(version>=4){
				return "ie4+";
			}else{
				return "ie4-";
			}
		}else{
			return "NSupport";
		}
   }
 </script>
<body>
	<div id="id1">
		<div id="movediv" style="background-color:blue;left:20px;top:20px;" onmousedown="moveInit('movediv',event);" onmousemove="Move('movediv',event)" onmouseup="stopMove()" onmouseout="stopMove()">12313</div>
		<div id="id2" style="background-color:red;width:200px;height:100px;"></div>
	</div>
</body>
</html>

第二种：

<!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>无标题文档</title>
<style type="text/css">
<!--
.drag{position:absolute;width:200px; background-color:green;height:120px;z-index:1;}
.da{width:100%;height:20px;background-color:black;color:white;cursor:move;}
.x{float:right;color:red;cursor:pointer;}
-->
</style>
</head>

<body>
<div class="drag" rel="drag" id="drag1" style="left:30px;top:10px;" onmousedown="dargit(this,event);">
    <div class="da" ><span class="x">x</span>拖动区1.</div>
    文字1
</div>
<script type="text/javascript">
var ey=0,ex=0,lx=0,ly=0,canDrg=false,thiso=null;//
var x, y,rw,rh;
var divs=document.getElementsByTagName("div");
for (var i=0;i<divs.length;i++){ 
     if(divs[i].getAttribute("rel")=="drag"){
       divs[i].onmousemove=function(){
       thismove(this);//实时得到当前对象与鼠标的值以判断拖动及关闭区域;
    }
     }
}

function thismove(o){
      rw=parseInt(x)-parseInt(o.style.left);
      rh=parseInt(y)-parseInt(o.style.top);
document.title=rw+"=文本区域="+rh;
      if(rh<=20 && rw>=180)document.title=rw+"||20*20||"+rh;//右上角20*20的关闭区域
if(rh<=20 && rw<180 )document.title=rw+"||可选||"+rh;//绝对拖动条选择区域;
}
function dargit(o,e){
thiso = o;
canDrg = true;
if(!document.all){
        lx = e.clientX; ly = e.clientY;
        }else{
          lx = event.x; ly = event.y;
     }
if(document.all) thiso.setCapture();
    
st(o);//置前或置后

}

document.onmousemove = function(e){
if(!document.all){ x = e.clientX; y = e.clientY; }else{ x = event.x; y = event.y; }
if(canDrg){
      //if(rh<=20 && rw<180 ){//如果要设定拖动区域可以作判断
var ofsx = x - lx;
thiso.style.left = parseInt(thiso.style.left) + ofsx;
lx = x;
var ofsy = y - ly;
thiso.style.top = parseInt(thiso.style.top) + ofsy;
ly = y;
//}else{canDrg=false;}
}
}

document.onmouseup=function(){
       canDrg=false;//拖拽变量设为false
       if(document.all && thiso != null){
        //ie下，将清捕获;
           thiso.releaseCapture();
        thiso = null;
     }
}


function set(obj){
       obj=obj.parentNode.parentNode;
       if(obj.getAttribute("rel"));
      //obj.style.zIndex=1;
    
}
function st(o){

var p = o.parentNode;
if(p.lastChild != o){
    p.appendChild(o);
}

if(rh<=20 && rw>=180){
canDrg=false;
//如果选择的是关闭区域;
      window.status=rw+"|"+rh;
      if(p.firstChild == o) return;
      p.insertBefore(o, p.firstChild);
          }
}

</script>


</body>
</html>

分享到：