最近做一个系统，用到了div的隐藏与显示来用于查询相关数据信息。可是在测试的时候发现显示div的时候可能会遮盖住一些用户希望看到的信息，老是切换div的display属性感觉还是挺麻烦的，因此，决定写一个JavaScript库，用于拖动div，付出终有收获。以下是部分JavaScript代码：
JavaScript脚本代码：
elementMove.js
/**
* @author mark
*/
/**
* 用于记录鼠标的位置。
*/
function PointerPosition(){
this.sx = 0;
this.sy = 0;
this.ex = 0;
this.ey = 0;
}
var poiPosi = new PointerPosition();
function move(W3CEvent){
//取得鼠标的位置
var end = OYF_MARK.getPointerPositionInExplorer(W3CEvent);
poiPosi.ex = end.x;
poiPosi.ey = end.y;
//取得要移动的dom对象的起始绝对位置
var wz=OYF_MARK.getElementLeftAndTop2(this);
var left=wz.left;
var top=wz.top;
//如果该元素有margin-left和margin-top属性，则计算元素新的位置时，必须减去该属性的数值。
var marginLeft=OYF_MARK.getStyle(this,'margin-left');
marginLeft = parseInt(marginLeft.slice(0, -2));
var marginTop=OYF_MARK.getStyle(this,'margin-top');
marginTop = parseInt(marginTop.slice(0, -2));
//计算元素的新位置
this.style.left = "" + (left+poiPosi.ex - poiPosi.sx-marginLeft) + "px";
this.style.top = "" + (top + poiPosi.ey - poiPosi.sy-marginTop) + "px";
poiPosi.sx = end.x;
poiPosi.sy = end.y;
OYF_MARK.stopPropagation(W3CEvent);
OYF_MARK.preventDefault(W3CEvent);
}
function addMoveEvent(){
var nodes=OYF_MARK.getElementsByClassName('move','*');
for (var i = 0; i < nodes.length; i++) {
registerEvent(nodes,i)
}
}
function setNodesZindex(nodes,j){
for(var i=0;i<nodes.length;i++){
if(i!=j){
OYF_MARK.setStyle(nodes[i],{'z-index':'9'});
}
}
}
function registerEvent(nodes,i){
var j=i;
var node=nodes[j];
OYF_MARK.addEvent(node, 'mousedown', function(W3CEvent){
setNodesZindex(nodes,j)//设置其余元素的z-index值。
OYF_MARK.setStyle(this,{'z-index':'10'});//设置当前元素的z-index值
//记录鼠标的起始位置
var start = OYF_MARK.getPointerPositionInExplorer(W3CEvent);
poiPosi.sx = start.x;
poiPosi.sy = start.y;
OYF_MARK.addEvent(node, 'mousemove', move);
});
OYF_MARK.addEvent(node, 'mouseup', function(W3CEvent){
OYF_MARK.removeEvent(node, 'mousemove', move);
});
OYF_MARK.addEvent(window, 'mouseup', function(W3CEvent){
OYF_MARK.removeEvent(node, 'mousemove', move);
});
}
OYF_MARK.addEvent(window, 'load', addMoveEvent);
html代码：
<HTML>
<HEAD>
<link rel="stylesheet" href="/tmcs/theme/Master.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<script language="JavaScript" SRC="/tmcs/gb/js/checkform.js"></script>
<script language="JavaScript" SRC="/tmcs/gb/js/OYF_MARK.js"></script>
<script language="JavaScript" SRC="/tmcs/gb/js/elementMove.js"></script>
<style type="text/css">
#job_list {
height: 350px;
width: 500px;
position: absolute;
border: 1px solid #09F;
background-color: #FFF;
display: none;
margin-top: 20px;
margin-left: -300px;
}
#employee_list {
height: 350px;
width: 500px;
position: absolute;
border: 1px solid #09F;
background-color: #FFF;
display: none;
margin-top: 20px;
margin-left: -300px;
}
</style>
</HEAD>
<body LEFTMARGIN="0" TOPMARGIN="10" MARGINWIDTH="0" MARGINHEIGHT="0">
<form name="myform" method="post" action="/tmcs/gb/Teller2AuthJob.do" onsubmit="check(myform)">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr >
<td align="center">
<table bgcolor="#D1DCE9" align="center" width="70%" border="0" cellpadding="0" cellspacing="1">
<tr>
<td bgcolor="#FFFFFF" align="center" height="25">选择员工</td>
<td bgcolor="#FFFFFF" align="left" height="25">
<input type="text" name="employeeid" value="" size="10" maxlength="3" onclick="showDiv('employee_list')" onkeypress="inputContrl('digit')" readonly/><input type="text" name="name" value="" size="20" readonly="readonly">
<div id="employee_list" class="move">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
<tr>
<td align="right" valign="top" height="25">
<TABLE width="100%" border="0" cellspacing="1" cellpadding="0" align="center" bgcolor="#D1DCE9">
<tr>
<td bgcolor="#F3F7FA" align="right" width="100%" height="20" >
<a href="#" onclick="showDiv('employee_list');"><img border="0" src="/tmcs/gb/images/closexp.gif"/></a>
</td>
</tr>
</TABLE>
</td>
</tr>
<tr>
<td>
<IFRAME name="employeeFrame" src="xx.do" width="100%" height="350" frameborder="0" scrolling="no"/></IFRAME>
</td>
</tr>
<tr>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" align="center" height="25">员工岗位</td>
<td bgcolor="#FFFFFF" align="left" height="25">
<input type="text" name="jobid" value="" size="10" maxlength="3" onclick="showDiv('job_list')" onkeypress="inputContrl('digit')" readonly/><input type="text" name="jobname" value="" size="20" readonly="readonly">
<div id="job_list" class="move">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
<tr>
<td align="right" valign="top" height="25">
<TABLE width="100%" border="0" cellspacing="1" cellpadding="0" align="center" bgcolor="#D1DCE9">
<tr>
<td bgcolor="#F3F7FA" align="right" width="100%" height="20" >
<a href="#" onclick="showDiv('job_list');"><img border="0" src="/tmcs/gb/images/closexp.gif"/></a>
</td>
</tr>
</TABLE>
</td>
</tr>
<tr>
<td>
<IFRAME name="countryFrame" src="xx.do" width="100%" height="350" frameborder="0" scrolling="no"/></IFRAME>
</td>
</tr>
<tr>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</HTML>
分享到：
相关推荐
jQuery-tinyDraggable, 非常轻量级的jQuery插件，用于呈现DOM对象 tinydraggable用于使对象可以拖动的简单jQuery插件。Firefox 1.5 与，Safari，Chrome，Opera，IE 7 兼容。 除了jQuery库之外没有依赖。 在MIT许可下...
HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新...
该库提供了一个非常简单的API，可以在特定DOM元素上使用拖动事件 安装 npm install click-and-drag 用法 import draggable from 'click-and-drag' const element = draggable ( { element : document . ...
parent DOM对象，拖动所属的父对象，必需是容器，可以为document.body onmove 函数对象，事件，拖动开始后，鼠标移动触发事件 onfinish 函数对象，事件，拖动结束时，触发事件一次 area 对象，可以缺省，必须包含4个...
最近完成了一个Drag类，可以实现指定对象的拖拽效果。
echarts关系图(力引导)拖动节点不还原位置,在init创建时第三个参数对象添加myOpts_:{draggableFixed_:true}即可,如: var mychart = echarts.init(dom,null,{myOpts_:{draggableFixed_:true}});创建一个拖动不还原的...
元素（必需）拖动对象的DOM元素或选择器config（可选）可选配置对象Configuration Options 创建拖动对象时，可以使用以下配置选项： 绑定对象（字符串或元素）拖动对象受limitX约束的DOM元素（或选择器）X（带有...
第6章 DoM对象 6．1 DOM概述 6．1．1 DOM简介 6．1．2 DOM与HTML文档 6．2 DOM对象 6．2．1 DOM基本接口 6．2．2 DOM基本对象 6．3 使用DOM 6．3．1 DOM基础 6．3．2 Node和NodeList接口 6．3．3 Element接口 ...
实现过程： 按下鼠标的时候，给文档对象（当然也可以是别的DOM对象）的移动事件绑定一个处理函数，同时也给鼠标抬起时绑定一个解除的处理函数。 代码如下: //按下鼠标并移动时(拖动)，调用的函数； function ...
三把匕首 像一样，拖动three.js对象（包括 ），但不修改原始位置。 现场演示可在。安装npm install --save three-dragger CDN版本也可以在unpkg上获得： 用法import ThreeDragger from 'three-dragger' ;const ...
第6章 DOM对象 122 6.1 DOM概述 122 6.1.1 DOM简介 122 6.1.2 DOM与HTML文档 124 6.2 DOM对象 125 6.2.1 DOM基本接口 125 6.2.2 DOM基本对象 128 6.3 使用DOM 128 6.3.1 DOM基础 129 6.3.2 Node和NodeList接口 131 ...
jQuery的DOM窗口最初在找到，此插件允许仅使用jQuery即可轻松创建各种模式弹... 与原始代码的区别如下： 合并来自更改在将其删除之前检查是否将可拖动对象应用于div 样式更改：选项卡现在是两个空格，其他样式上的更改
以下是个人对Range对象的了解和常用操作的实例和总结： Range对象 Range对象表示文档的连续范围区域，如用户在浏览器窗口中用鼠标拖动选中的区域。 dom标准Range对象 ...
10.5.1 jquery在其他库前导入 10.5.2 jquery在其他库后导入 10.6 使用子查询优化选择器性能 10.7 减少对dom元素直接操作 10.8 正确区分dom对象与jquery对象 10.8.1 dom对象与jquery对象的定义 10.8.2 ...
·一个XMLHttpRequest应答能被路由到一个或者更多回叫操作，DOM对象，或者Javascript对象。 ·容易鼠标拖动支持。 ·Ajax动画，例如缩放和变换。 ·"行为"-实质上是窗口小组件库。 ·使用指南...
在web开发中，不可避免遇到要计算元素大小以及位置的问题，解决这类问题的方法是利用DOM提供的一些API结合兼容性处理来，所有内容大概分3篇左右的文章的来说明。本文作为第一篇，介绍DOM提供的与尺寸大小相关的DOM...
第1章 第一个简单的jQuery程序 jQuery事件的链式写法 控制jQuery对象 jQuery控制CSS样式 第2章 使用JavaScript实现隔行变色 ...DOM对象与jQuery对象的类型转换 第11章 应用案例-聊天室系统 应用案例_图片切割
25、Js 拖动的原理？（必会） 118 26、描述浏览器的渲染过程，DOM 树和渲染树的区别（必会） 119 27、dom 树和 render 树之间的关系？（高薪常问） 119 28、获取到页面中所有的 CheckBox 怎么做（不适用第三方框架）...
4.动态dom对象创建表格树 5.完美支持json格式数据,支持xml(需转换) 6.支持ajax加载节点 7.事件驱动 8.可以动态根据列内容排序 9.简化函数参数,利用{} object输入参数,风格类似Extjs 10.树状结构可以选择出现在某一列...
drag-it-dude Vue2组件拖放到任何位置，可将对象拖到任何地方您想要做什么可以将DOM元素拖放到父级（或文档，如果未指定父级的大小）中接收内容大小并更新移动限制用鼠标或触摸移动都没关系发射活动和拖动事件演示...