可以移动的层(Div)兼容IE和firefox浏览器
<html><head> <title>移动Div</title> <style type="text/css" rel="stylesheet"> #movediv{ width:100px;height:100px;position:absolute;border:1px solid #000;background:#EAEAEA; cursor:pointer; text-align:center; line-height:100px; left:100px; top:10px; } </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></head><body> <div id="movediv" style="left:20px;top:20px;" οnmοusedοwn="moveInit('movediv',event);" οnmοusemοve="Move('movediv',event)" οnmοuseup="stopMove()" οnmοuseοut="stopMove()">move</div></body></html>
为防止再次被移除js代码,我将body中内容列出!<div>move</div>上面的div的属性和事件有:id="movediv"style="left:20px;top:20px;"οnmοusedοwn="mouseInit('movediv',event);"οnmοusemοve="Move('movediv',event)"οnmοuseup="stopMove()"οnmοuseοut="stopMove()"
<!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;" οnmοusedοwn="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].οnmοusemοve=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.οnmοuseup=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>
