最近做一个系统，用到了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鼠标悬停展开可拖动图标导航"是一个结合了jQuery事件处理、DOM操作和UI交互的实例，展示了如何利用JavaScript库提高网页的互动性和用户体验。尽管在老版IE浏览器中可能不兼容，但在现代浏览器中，...
在IT行业中，"可拖动的树"是一种交互式的用户界面元素，通常用于展示具有层级关系的数据，如文件系统、组织结构或导航菜单。在这个场景中，"拖动"功能使得用户可以通过直观的手势来重新排列节点，而"Ajax"（异步...
"DOM鼠标拖动"是一种常见的交互功能，使得用户可以通过鼠标来移动页面上的DOM元素，提升用户体验。在本案例中，"DivMoveTest.html"和"element_drafting.js"两个文件可能分别包含了HTML结构和实现拖动效果的...
本项目“jQuery可拖动图标导航菜单”利用jQuery的强大功能，为网页设计提供了一种创新的用户体验，使用户可以自由地拖动导航菜单图标，增强互动性和个性化设置。 该导航菜单主要涉及以下技术点： 1. **jQuery库**...
总结起来，jQuery表格可拖动调整列宽度大小是一项涉及DOM操作、事件处理、样式修改和可能的动画效果的技术。通过理解和应用这些知识点，开发者可以创建出更用户友好的网页应用，提升用户的交互体验。在实际项目中，...
DOM（Document Object Model，文档对象模型）是HTML和XML文档的编程接口。它允许开发者使用脚本语言（如JavaScript）来访问和修改文档的结构、样式和内容。DOM将文档表示为一个树形结构，其中每个节点代表文档中的一...
jQuery-tinyDraggable, 非常轻量级的jQuery插件，用于呈现DOM对象 tinydraggable用于使对象可以拖动的简单jQuery插件。Firefox 1.5 与，Safari，Chrome，Opera，IE 7 兼容。 除了jQuery库之外没有依赖。 在MIT许可下...
在“mootools层拖动实现”这个主题中，我们将深入探讨如何利用Mootools库实现可拖动的div层。这对于创建交互式网页元素，如对话框、窗口或者自定义导航菜单等，是非常有用的。 Mootools的核心概念之一是其对DOM...
在微信小程序中实现一个可拖动的悬浮球功能，涉及到的主要技术点包括小程序的基本结构、事件处理、CSS布局以及手势识别。以下是对这些知识点的详细解释： 1. **小程序基本结构**：微信小程序是由一系列的页面组成，...
本项目“jQuery版简单易用的可拖动右下角浮动窗口”是一个利用jQuery实现的交互式UI组件，适用于创建具有动态效果的网页元素，特别是那些需要在用户界面上悬浮并可自由拖动的窗口。 这个特效的核心功能在于提供一个...
在本文中，我们将深入探讨如何实现一个可拖动的JQuery JModal弹窗，并了解其在不同浏览器中的兼容性。JModal是一款基于jQuery的模态对话框插件，它允许用户通过简单的API调用来创建交互式的弹出窗口。在本案例中，...
在Bootstrap可拖动文件批量上传代码中，jQuery被用来简化DOM操作和事件处理。jQuery的选择器、遍历和事件绑定等功能使得编写这样的插件变得更加简洁和高效。例如，你可以使用jQuery选择器找到页面上的文件输入元素，...
HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新...
总的来说，这个项目涵盖了JavaScript基础，如事件处理、DOM操作、CSS样式修改，以及面向对象编程的概念。通过学习和实践这样的项目，开发者能够提升对JavaScript交互式UI开发的理解，更好地满足用户界面的动态需求。...
在这个场景中，我们讨论的是一个基于JavaScript开发的可拖动日历控件，它为用户提供了一种直观的方式来选择日期，并能与页面上的其他元素（如文本框）进行交互。这个控件的独特之处在于它的可拖动特性，允许用户将...
使用JavaScript，可以对HTML文档对象模型（DOM）进行操作，包括获取表格元素，设置或修改样式属性，如`style.width`来改变列的宽度。此外，可能还需要维护一个数据结构，存储每个列的原始宽度，以便在需要时恢复。 ...
这通常涉及到AJAX请求，通过`XMLHttpRequest`对象或者使用更现代的`fetch` API与服务器进行异步通信。 为了创建一个美观的拖拽体验，开发者可能会使用CSS来定制拖动元素的样式，例如在拖动过程中改变其透明度或添加...
jQuery对象通常用"$"表示，它可以用来选择DOM元素、操作DOM结构、绑定事件以及执行各种动画效果。在创建滑动拖动的时间日期范围选择器时，我们可能会用到以下关键的jQuery方法： 1. `$(selector)`：这是jQuery的...
其次，动态改变背景色是利用JavaScript操作DOM（文档对象模型）的一个例子。`document` 对象提供了访问和修改页面元素的方法。通过获取`document.body` 或特定元素，我们可以改变其`style.backgroundColor` 属性，...
" 描述了一个交互式的网页功能，用户可以通过点击按钮来显示一个可拖动的 `div` 对象。 首先，我们需要理解这个功能的核心组成部分： 1. **按钮（Button）**：这是一种交互元素，用户点击后触发某些操作。在这个...