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> 

相关文章推荐

javascript 实现的层拖动简单实例

  • 2008年09月27日 12:49
  • 19KB
  • 下载

使用Struts2+JavaScript+Ajax实现成绩录入功能

基本需求:使用Struts2框架成绩录入功能。画面概要:(如图示) 数据库表格 (tbl_scoreinfo): 姓名 Username Varchar2(20)   ...
  • w_mamba
  • w_mamba
  • 2015年02月05日 12:09
  • 361

JavaScript实现DIV层拖动

  • 2010年09月15日 15:58
  • 7KB
  • 下载

Struts2中Ajax的使用(Javascript实现)

Struts2中Ajax的使用(Javascript实现) 描述:实现在输入框中输入信息时动态提示(模仿百度或谷歌的页面效果)。 注意:服务器端提示信息以XML格式返回。 1. 页面效果 ...

Cocos2d-x Lua/Javascript脚本代码加密实现例子【转】

http://www.111cn.net/sj/iOS/75513.htm 下文为各位介绍一个Cocos2d-x Lua/Javascript脚本代码加密实现例子,有需要的朋友可进入参考。 ...

android web view的学习 2 通过WebChomeClient 实现进度条和title,通过WebViewClient 来进行url的拦截,和javascript的交互

首先自定义一个接口, package com.example.administrator.webviewdemo; /** * Created by Administrator on 2016/8...
  • Rodulf
  • Rodulf
  • 2016年08月20日 00:19
  • 745

使用JavaScript实现一个“字节码解释器”,并用它重新实现JS科学计算器的后端(后续2)

使用JavaScript实现一个“字节码解释器”,并用它重新实现JS科学计算器的后端(后续1) https://codereview.chromium.org/1485023004/...
  • cteng
  • cteng
  • 2015年12月02日 19:50
  • 547

三、ArcGIS API for JavaScript之地图与图层(2)

4、图形图层图形图层GraphicsLayer是一种客户端图层,并不对应到服务器端的某个地图服务,用于在客户端展现各种数据,如绘制的图形,查询返回的结果等。GraphicsLayer在客户端数据表达方...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript实现层拖动(2)
举报原因:
原因补充:

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