大家好,我好想自己亲手写一个可以用鼠标拖动的层,可是我一点头绪也没有,从JAVAEYE上搜到了一篇文章,可是还是看不懂.
有谁知道这个原理,可是讲讲吗(最好写一点面向对象的js代码)?我想弄懂之后,创建一个JS 工具类,用来创建一个notice对话框.
谢谢您!!!!
javaeye上一网友的文章,他的地址我不记得了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
.divcc{
position:absolute;
border: 1px #FF99FF solid;
background-color:#FFFF99;
height:auto;
width:300px;
z-index:1000;
}
.divdd{
position:absolute;
border: 0px;
background-color:#FFFF80;
height:auto;
width:300px;
z-index:999;
}
</style>
<script>
function cursorover(){
document.getElementById("cc").style.cursor="move";
}
function cursorout(){
document.getElementById("cc").style.cursor="auto";
}
//可移动的层
var dragapproved=false;
var z,x,y;
function move(){
if (event.button==1&&dragapproved){
z.style.pixelLeft=temp1+event.clientX-x;
z.style.pixelTop=temp2+event.clientY-y;
return false;
}
if(event.button==2){
alert("别复制！！");
return false;
}
}
function drags(){
if (!document.all)
return;
if (event.srcElement.className=="divcc"){
dragapproved=true;
z=event.srcElement;
temp1=z.style.pixelLeft;
temp2=z.style.pixelTop;
x=event.clientX;
y=event.clientY;
document.onmousemove=move;
}
}
document.onmousedown=drags;
document.onmouseup=new Function("dragapproved=false");
//--------------------------------------------------------------------------------------------------------------------------
//初始化层位置
function init(){
var w =document.body.clientWidth;
var h =document.body.clientHeight;
var divObj = document.getElementById("cc");
divObj.style.left = w/2;
divObj.style.top = h/2;
alert('w:'+w);
alert('h:'+h);
}
//最大化
function max(){
document.getElementById("dd").style.display="inline";
var divObj = document.getElementById("cc");
divObj.style.width="300px";
var w =document.documentElement.clientWidth;
var h =document.documentElement.clientHeight;
divObj.style.left = w/2;
divObj.style.top = h/2;
}
//最小化
function min(){
document.getElementById("dd").style.display="none";
var divObj = document.getElementById("cc");
var w =document.documentElement.clientWidth; //获得网页可见区域的宽度（不包括边框）
var h =document.documentElement.clientHeight; //获得网页可见区域的高度（不包括边框）
divObj.style.width="150px"; //设置层宽度
var myw = divObj.offsetWidth; //获得自身的宽度（包括边框）
var myh = divObj.offsetHeight; //获得自身的高度（包括边框）
var curw = w - myw;
var curh = h - myh;
divObj.style.left = curw;
divObj.style.top = curh;
}
//关闭
function clo(){
document.getElementById("cc").style.display="none";
}
</script>
</HEAD>
<BODY onload="init()">
<div id="cc" onmouseover="cursorover()" onmouseout="cursorout()" class="divcc">
<span style="height:20px;" onclick="max()">最大化</span> <span onclick="min()">最小化</span> <span onclick="clo()">关闭</span><br/>
<div id="dd" class="divdd">
<table border="1px" cellpadding="0" cellspacing="0" bordercolor="#FF33CC" width="300px">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
</div>
</div>
</BODY>
</HTML>
document.documentElement与document.body是同一个对象吗?
答案是:
原来HTML里是document.body
XHTML里是document.documentElement
都指的是 <body >节点(OR元素)
可以这样兼容：
function getBodyObj()
{
return (document.documentElement) ? document.documentElement : document.body ;
}
分享到：
相关推荐
NULL 博文链接：https://lhdst-163-com.iteye.com/blog/2353266
WNetAddConnection 创建同一个网络资源的永久性连接 WNetAddConnection2 创建同一个网络资源的连接 WNetAddConnection3 创建同一个网络资源的连接 WNetCancelConnection 结束一个网络连接 WNetCancelConnection2...
Shift：添加至/取消选择 Ctrl：移动选择锚 N：下一个被选要素 R：切换至旋转模式/从旋转模式切换 F：切换至要素模式/从要素模式切换 E：在Sketch工具、Edit工具和Edit Annotation工具间切换 L：在跟踪要素模式下将...
这种方法的缺点是效率低，因为检查每一个数据包的网络层地址是需要消耗处理时间的(相对于前面两种方法)，一般的交换机芯片都可以自动检查网络上数据包的以太网帧头，但要让芯片能检查IP帧头，需要更高的技术，同时...
创建一个或多个数据提供程序并选择合适的解析器 创建一个或多个手机/车辆并分配相应的数据提供者 开始追踪 在导引坞中选择车辆以查看距离和方向 将来的扩展 数据记录 在单独的（gpx-）层上记录事件/目标 执照 ...
遍历每个画板，并在画板名称所在的位置创建一个文本标签，以便在导出切片时可见。 它还围绕所有可见内容（可切换）绘制一个切片。 如果您移动/更改画板名称，只需重新运行该插件，它将用新的替换“旧画板标签”组...
8. 62-63=1 等式不成立，请移动一个数字（不可以移动减号和等于号），使得等式成立，如何移动？ 答案:62移动成2的6次方 new有几种用法 第一种:new Class(); 第二种:覆盖方法 public new XXXX(){} 第三种:new 约束...
这个是前面一个的加强版 40-50个相关代码 和大家一起学习 2. 使某图层可选或不可选 3 ...5 移动层的顺序 mapControl1.Map.Layers.Move(index1,index2); 51 6 图元/图层透明 51 7 选择全部图元 53 10 计算缩放比例 57
你可以根据自己的爱好和习惯设置，有的朋友喜欢用遮罩，也可以建立遮罩层，至于怎样排列，根据自己的情况而定，有些人习惯把每句歌词或者每张图片都建一个单独的层，这也未尝不可，建议建一个层文件夹，把新建的歌词...
在2002年，Tim Kemp 发现 Subversion 是一个很好的版本控制系统，但是没有好的图形化客户端，创建一个作为 Windows 外壳集成的 Subversion 客户端的创意来自 TortoiseCVS，一个非常类似的 CVS 客户端。 Tim 学习了 ...
光盘中还包括书中各章“过关练习题”对应的习题答案，书中各个实例对应的素材与模板，以及一本内含260个经典的Pro／ENGINEER野火版3．0实战技巧的电子版图书，大大地扩充了《新编Pro/ENGINEER野火版3.0入门与提高》...
后端 API 层试图将所有当前的遗留 API 系统以及各种收容所和流浪动物的一般数据统一在一个系统且统一的 JSON API 层下。 这个后端 API 层： 为 Pttr 的 Web 和移动应用程序提供支持，以聚合当前不在系统中的流浪...
作为一款可以加速实现企业Web应用程序及随时可访问数据源移动化的解决方案，Sybase UA确保了用户无论在办公室内还是在办公室外，其访问信息的效率和效果是完全相同的。在此次系统建设中，Sybase UA将应用于广东移动...
5个目标文件，演示Address EJB的实现，创建一个EJB测试客户端，得到名字上下文，查询jndi名，通过强制转型得到Home接口，getInitialContext()函数返回一个经过初始化的上下文，用client的getHome()函数调用Home接口...
mxp/一个层的移动插件，很不错的。其控制项和效果都很好，而且各种浏览器的兼容性也很好，支持IE4以上NN4、NN6、opera 5 mxp/分析站点的结构，产生XML结构的IMS Course Packaging Manifest文件，既一个站点结构说明...
% 这些应该是黑白图片，一个数字2 到 6 个图像之间的百分比在大多数情况下都可以% 情况（默认：当前） % 输出% 编码动画图像要打印在白纸上（二维矩阵） % venetianBlindsPattern 要打印在透明介质上的图像（二维...
ET GeoWizards是一组强大的功能，可帮助GIS专业人员轻松操作数据。它提供了100多种功能，用于空间数据转换，分析，拓扑清理，采样等。 自由功能列表 基本功能 创建新要素类 创建新的文件GDB 排序形状 移动形状 旋转...
ET GeoWizards是一组强大的功能，可帮助GIS专业人员轻松操作数据。它提供了100多种功能，用于空间数据转换，分析，拓扑清理，采样等。 自由功能列表 基本功能 创建新要素类 创建新的文件GDB 排序形状 移动形状 旋转...
1. 目录下右键即可创建文件，一步完成，和创建文件夹一样快速，并且文件类型可自定义，可创建Microsoft Office文件，Word，Excel，PowerPoint等。 2. 快速复制、移动文件到预先设定的目录，两步完成，再也不用打开新...
移动SSH项目（Struts + Spring + Hibernate + Oracle）是一个基于Java Web技术栈的企业级应用，旨在为企业提供一个高效、灵活且可扩展的解决方案。项目采用了Struts2作为表现层框架，Spring作为依赖注入和管理的核心...