ドラッグ可能なDOMオブジェクト
9446 ワード
最近システムを作って、divの隠蔽と表示を使って、関連データ情報を調べます.しかし、テストの時にdivを表示すると、一部のユーザーが見たい情報を隠してしまいます.いつもdivのdisplay属性を切り替えるのは面倒くさいと思います.だから、JavaScriptライブラリを書いて、divをドラッグすることにします.以下は一部JavaScriptコードです.
JavaScriptスクリプトコード:
element Move.js
JavaScriptスクリプトコード:
element Move.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>
<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>