javascript实现层拖动(2)

转载 2007年09月15日 08:48:00

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="utf8" />
<style>
<!--
#outerRasiedDiv {
-moz-opacity:0.5;
filter:alpha(opacity=40);
position: absolute;
z-index: 2;
overflow:hidden;
background:#f90;
margin:0px;
/* border:1px red solid; */
padding:10px;
height:90px;
width:90px;
}
#innerDiv {
-moz-opacity:0.5; filter:alpha(opacity=30);
cursor: pointer;
margin:0px;
/* border:1px red solid; */
background: #ffffff; 
height: 100%;
width: 100%;
position:relative;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
var eS
var eSs
var DiyW
var DiyH
var eS=1;
var theobject = null;
function resizeObject()
{
 this.el = null;
 this.dir  = "";
 this.grabx = null;    
 this.graby = null;
 this.width = null;
 this.height = null;
 this.left = null;
 this.top = null;
}
var d = 0;
function find(_jerry, _evt){
 d=_jerry;
 var evt;
 evt = _evt ? _evt : (window.event ? window.event : null);
 if(evt.pageX)
 {
  x=evt.pageX - document.getElementById(d).offsetLeft;
  y=evt.pageY - document.getElementById(d).offsetTop;
 }else{
  x=evt.clientX - document.getElementById(d).style.pixelLeft;
  y=evt.clientY - document.getElementById(d).style.pixelTop;
 }
}
function dragit(_evt){
 if(d==0)
  return false
 else{
  var evt;
  evt = _evt ? _evt : (window.event ? window.event : null);
  if(document.getElementById(d).offsetLeft > 1){
   document.getElementById(d).style.left=(evt.clientX-x)+"px";
  }else{
   document.getElementById(d).style.left = 2+"px";
  }
   if(document.getElementById(d).offsetTop > 1){
    document.getElementById(d).style.top=(evt.clientY-y)+"px";
   }else{
    document.getElementById(d).style.top = 2+"px";
   }
 }
}
function getDirection(el, evt)
{
 var xPos, yPos, offset;
 var dir = "";
 var evt;
 evt = evt ? evt : (window.event ? window.event : null);
 xPos = evt.clientX;
 yPos = evt.clientY;
 offset = 10;
 if (yPos < offset) dir += "n";
 else if (yPos > el.offsetHeight-offset) dir += "s";
 if (xPos < offset) dir += "w";
 else if (xPos > el.offsetWidth-offset) dir += "e";
 return dir;
}
function doDown(_evt) {
 var evt;
 evt = _evt ? _evt : (window.event ? window.event : null);
 if(evt.pageX){
  var el = getReal(evt.target, "className", "resizeMe");
 }else{
  var el = getReal(evt.srcElement, "className", "resizeMe");
 }
 if (el == null) {
  theobject = null;
  return;
 } 
 dir = getDirection(el, _evt);
 if (dir == "") return;
 theobject = new resizeObject();
 theobject.el = el;
 theobject.grabx = evt.clientX; //鼠标点下时的坐标x长
 theobject.graby = evt.clientY; //鼠标点下时的坐标y长
 theobject.width = el.offsetWidth; //记录鼠标点下是div outerRasiedDiv的宽
 theobject.height = el.offsetHeight; //记录鼠标点下是div outerRasiedDiv的高
 //evt.returnValue = false;
 //evt.cancelBubble = true;
}
function doUp() {
 if (theobject != null) {
  theobject = null;
 }
}
function doMove(_evt) {
 var el, xPos, yPos, str, xMin, yMin;
 xMin = 10;
 yMin = 10;
 var evt;
 evt = _evt ? _evt : (window.event ? window.event : null);
 if(evt.pageX){
  var el = getReal(evt.target, "className", "resizeMe");
 }else{
  var el = getReal(evt.srcElement, "className", "resizeMe");
 }
 /*
 if (el.className == "resizeMe") {
  str = getDirection(el, _evt);
  if (str == "") str = "default";
  else str += "-resize";
  el.style.cursor = str;
 }
 */
 if(theobject != null) {
  if (dir.indexOf("e") != -1)
   document.getElementById("outerRasiedDiv").style.width = Math.max(xMin, theobject.width + evt.clientX - theobject.grabx)+"px";
   if(eSs)
    document.getElementById("outerRasiedDiv").style.height =  (theobject.el.style.width.replace("px","")/eS)+"px";
   
  if (dir.indexOf("s") != -1)
   document.getElementById("outerRasiedDiv").style.height = Math.max(yMin, theobject.height + evt.clientY - theobject.graby)+"px"; 
   if(eSs)
   document.getElementById("outerRasiedDiv").style.width = (theobject.el.style.height.replace("px","")*eS)+"px";
  
  if (dir.indexOf("w") != -1) {
   document.getElementById("outerRasiedDiv").style.left = Math.min(10 + evt.clientX - theobject.grabx, 10+ theobject.width - xMin)+"px";
   document.getElementById("outerRasiedDiv").style.width = Math.max(xMin, theobject.width - evt.clientX + theobject.grabx)+"px";
  }
  if (dir.indexOf("n") != -1) {
   document.getElementById("outerRasiedDiv").style.top = Math.min((10 + evt.clientY - theobject.graby), (10+ theobject.height - yMin))+"px";
   document.getElementById("outerRasiedDiv").style.height = Math.max(yMin, (theobject.height - evt.clientY + theobject.graby))+"px";
  }
  evt.returnValue = false;
  evt.cancelBubble = true;
  d=0
 }
}
function getReal(el, type, value) {
 temp = el;
 while ((temp != null) && (temp.tagName != "BODY")) {
  if (eval("temp." + type) == value) {
   el = temp;
   return el;
  }
  temp = temp.parentElement;
 }
 return el;
}
document.onmousedown = doDown;
document.onmouseup   = doUp;
document.onmousemove = doMove;
-->
</script>
</head>
<body>
<div class="resizeMe" id="outerRasiedDiv">
 <div id="innerDiv" style="" onmousemove="dragit(event);" onmouseup="d=0" onmouseleave="d=0" onmousedown="find('outerRasiedDiv', event)"></div>
</div>
 
<img alt="" src="http://jerrydou.space.bala.com.cn/usrdata/31/77/jerrydou/album/3749/2006040602181304.jpg"  />

</body>
</html> 

Js无刷新添加新层,拖动DIV层可互换位置的JavaScript实现

无刷新添加一个新的DIV层,并可实现的该层的拖动,鼠标拖动层可移动位置,将JS部分另存为一个新文件,用到的时候从外部引入,这个拖动层代码很流行,GG和YAHOO等大网站经常可以看到这种效果...
  • life66881
  • life66881
  • 2015年04月04日 18:09
  • 497

javascript实现层的拖动

  var Obj;function MouseDown(obj){Obj= obj;Obj.setCapture();//指定窗口里设置鼠标捕获Obj.l=event.x-Obj.style.pix...
  • ocean20
  • ocean20
  • 2008年06月13日 12:11
  • 512

javascript实现层拖动(3)

from fenger.tk#root {BORDER-RIGHT: #333 1px solid; BORDER-TOP: #333 1px solid; FONT-SIZE: 12px; BORD...
  • xzzhouhu
  • xzzhouhu
  • 2007年09月15日 08:49
  • 397

javascript实现层拖动(1)

      drag layer    body,table{color:#000000;       font-size:12px;   }   div.div_one{}   .dragBar{c...
  • xzzhouhu
  • xzzhouhu
  • 2007年09月15日 08:47
  • 396

JavaScript实现拖动,伸缩层

 
  • sunshinestation
  • sunshinestation
  • 2008年07月23日 17:22
  • 814

javascript拖动层

var move = false; function div2move(obj) { obj.style.cursor = "move"; if(move) { ...
  • anfeng_8379
  • anfeng_8379
  • 2010年08月19日 16:30
  • 209

javascript中拖动层

             function   Pos(x,y)     {      this.x   =   x;      this.y   =   y;     }         var  ...
  • bxf0011
  • bxf0011
  • 2007年04月28日 11:33
  • 729

javascript 几种跳转方式

第一种:                window.location.href="login.jsp?backurl="+window.location.href;      第...
  • wetoto
  • wetoto
  • 2016年09月14日 17:28
  • 90

拖动浮层(div等任何标签)

拖动浮层(div等任何标签)  之前项目做到一个弹出层需要一个拖动功能,上网上查了资料,发现很多方法,但是感觉都很繁琐,有的甚至没看懂。看了几个方法后发现基本上都是使用mousedown、mousem...
  • csmzl
  • csmzl
  • 2016年10月13日 15:54
  • 638

一个非常好用的可拖动的jquery弹出层

不用解释直接上代码,代码有注释,不懂的话直接拿去用。这只是一个简单的效果,若要复杂的效果请参考http://www.hestudy.com/file/demo/tipswindown/页面挡下来。 ...
  • mdcmy
  • mdcmy
  • 2012年07月10日 17:54
  • 2351
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript实现层拖动(2)
举报原因:
原因补充:

(最多只允许输入30个字)