拖动层

<HTML><HEAD><TITLE>drag layer</TITLE>
<SCRIPT language=javascript defer>
var tmpElement=null;
var dragElement=null;
var downX,downY,tmp_o_x,tmp_o_y;
var refElement=null;
var dragActive=0;
var draging=0;
var fid=waitinput;
var visible=false;

function Change(){
var bt2=document.getElementById("div_one");
if(visible){
  bt2.style.visibility="hidden";
  if (tmpElement!=null){tmpElement.style.visibility="hidden";}
  visible=false;
}
else{
  bt2.style.visibility="visible";
  if (tmpElement!=null){tmpElement.style.visibility="visible";}
  visible=true;
}

}

function Input(str){
window.fid.value=window.fid.value+str

}

function readyDrag(){
dragActive=1;
if(event.srcElement.tagName!="DIV")
  return;
dragElement=event.srcElement.parentNode;
tmpElement=dragElement.cloneNode(true);
tmpElement.style.filter="alpha(opacity=50)";
tmpElement.style.zIndex=2;
dragElement.style.zIndex=1;
tmpElement.style.position="absolute";
if(dragElement.parentNode.tagName!="BODY"){
  dragElement.style.left=dragElement.offsetLeft+dragElement.parentNode.style.pixelLeft;
  dragElement.style.top=dragElement.offsetTop+dragElement.parentNode.style.pixelTop;

}
downX=event.clientX;
downY=event.clientY;
tmp_o_x=dragElement.style.pixelLeft;
tmp_o_y=dragElement.style.pixelTop;
tmpElement.style.visibility="hidden";
document.body.appendChild(tmpElement);

document.onmousemove=startDrag;
}
document.onmouseup=endDrag;
function startDrag(){
if(dragActive==1&&event.button==1&&dragElement!=null&&tmpElement!=null){
  tmpElement.style.visibility="visible";
  tmpElement.style.left=tmp_o_x+event.clientX-downX;
  tmpElement.style.top=tmp_o_y+event.clientY-downY;
  //dragElement.style.backgroundColor="#CCCCCC";
  document.body.style.cursor="move";
  draging=1;
  dragElement.removeNode(true);
}
}
function endDrag(){
if(dragActive==1&&tmpElement!=null){
  if(draging==1){
   dragElement.removeNode(true);
   draging=0;
  }
  tmpElement.style.filter="alpha(opacity=80)";
  tmpElement.style.zIndex=1;
  document.body.style.cursor="default";
  if(refElement!=null&&refElement.parentNode!=null&&refElement.parentNode.tagName!="BODY"){
   tmpElement.style.width=refElement.parentNode.style.width;
   tmpElement.style.position="";
   refElement.parentNode.insertBefore(tmpElement,refElement);
  }
}

dragElement=null;
tmpElement=null;
dragActive=0;
}

document.onselectstart=function(){return false}
</SCRIPT>

<META content="MSHTML 6.00.3790.2817" name=GENERATOR>
</HEAD>
<BODY>

<tD>
<tD>请输入地块编号</TD>
<input id=waitinput onfocus="fid=waitinput"></input>
<input id=waitinput2 onfocus="fid=waitinput2"></input></TD>
<img src="images/csdn.gif" alt="显示/隐藏" onclick="Change()">

<DIV class=div_one id=div_one
style="Z-INDEX: 1; LEFT: 155px; filter:Alpha(opacity=80); WIDTH: 242px; POSITION: absolute; TOP: 240px; BACKGROUND-COLOR: #ffffff; layer-background-color: #FFFFFF"
<DIV>
<DIV class=dragBar onmousedown=readyDrag() style="BORDER-RIGHT: #3E8529 1px solid; BORDER-TOP: #3E8529 1px solid; BORDER-LEFT: #3E8529 1px solid; CURSOR: move; BORDER-BOTTOM: #639517 1px solid; WIDTH: 244px; HEIGHT: 25px; BACKGROUND-COLOR: #639517;font_family:宋体;font-size:13pt" name="dragDIV">
<td><font style="font-size:1pt"></BR></font></td>

<strong><td align="right"><font style="cursor:hand;font-size:12pt;font_family:宋体" onClick="Change()">&nbsp关闭×</font></td></strong></DIV><DIV>

<DIV class=textSheet
style="BORDER-RIGHT: #3E8529 1px solid; BORDER-TOP: #639517 1px solid; BORDER-LEFT: #3E8529 1px solid; BORDER-BOTTOM: #3E8529 1px solid">

<table width="242" height="160" border="1" cellspacing="5">
<tr>
    <td align="center" valign="middle" style="cursor:hand;font-size:32px;color: #808080" onMouseMove="bgColor='#ffff99'" onmouseout="bgColor='#FFFFFF'" onclick="Input('1')">1</td>
    <td align="center" valign="middle" style="cursor:hand;font-size:32px;color: #808080" onMouseMove="bgColor='#ffff99'" onmouseout="bgColor='#FFFFFF'" onclick="Input('2')">2</td>
    <td align="center" valign="middle" style="cursor:hand;font-size:32px;color: #808080" onMouseMove="bgColor='#ffff99'" onmouseout="bgColor='#FFFFFF'" onclick="Input('3')">3</td>
    <td align="center" valign="middle" style="cursor:hand;font-size:32px;color: #808080" onMouseMove="bgColor='#ffff99'" onmouseout="bgColor='#FFFFFF'" onclick="Input('4')">4</td>
</tr>
<tr>
    <td align="center" valign="middle" style="cursor:hand;font-size:32px;color: #808080" onMouseMove="bgColor='#ffff99'" onmouseout="bgColor='#FFFFFF'" onclick="Input('5')">5</td>
    <td align="center" valign="middle" style="cursor:hand;font-size:32px;color: #808080" onMouseMove="bgColor='#ffff99'" onmouseout="bgColor='#FFFFFF'" onclick="Input('6')">6</td>
    <td align="center" valign="middle" style="cursor:hand;font-size:32px;color: #808080" onMouseMove="bgColor='#ffff99'" onmouseout="bgColor='#FFFFFF'" onclick="Input('7')">7</td>
    <td align="center" valign="middle" style="cursor:hand;font-size:32px;color: #808080" onMouseMove="bgColor='#ffff99'" onmouseout="bgColor='#FFFFFF'" onclick="Input('8')">8</td>
</tr>
<tr>
    <td align="center" valign="middle" style="cursor:hand;font-size:32px;color: #808080" onMouseMove="bgColor='#ffff99'" onmouseout="bgColor='#FFFFFF'" onclick="Input('9')">9</td>
    <td align="center" valign="middle" style="cursor:hand;font-size:32px;color: #808080" onMouseMove="bgColor='#ffff99'" onmouseout="bgColor='#FFFFFF'" onclick="Input('0')">0</td>
    <td align="center" valign="middle" style="cursor:hand;font-size:32px;color: #808080" onMouseMove="bgColor='#ffff99'" onmouseout="bgColor='#FFFFFF'" onclick="Input('.')">.</td>
    <td align="center" valign="middle" style="cursor:hand;font-size:32px;color: #808080" onMouseMove="bgColor='#ffff99'" onmouseout="bgColor='#FFFFFF'" onclick="window.fid.value=''">C</td> </tr>
</table>
</DIV>

</BODY></HTML>

posted @ 2007-02-03 19:33 '.Elvis.' 阅读(335) 评论(0) 收藏举报

刷新页面返回顶部