拖动的层的javascript实现

<HTML> 
<HEAD>
 
<SCRIPT>
var defSelectContorl = null,charSelectContorl = null,datetimeSelectContorl = null;
function filter( a0 )
{
 d 
= 0;
 cY 
= -1;
 cX 
= -1;
 
var srcObj = window.event.srcElement;
 
var objDiv = document.getElementById("table1");
 objDiv.style.pixelTop 
= window.event.y - srcObj.offsetTop + srcObj.parentNode.offsetHeight;
 objDiv.style.pixelLeft 
= window.event.x - srcObj.offsetLeft;
 objDiv.style.display 
= "block";
 alert( objDiv.outerHTML);
}
//***********move filter Div code..
var d = 0,cX = -1,cY = -1;
var curObj;
function MD( objID )
{
 curObj 
= document.getElementById( objID );
  d 
= 1;
}
function MU()
{
 d 
= 0;
 cY 
= -1;
 cX 
= -1;
}
function MM()
{
 
if( d == 0 )
 {
  
return;
 }
 
var objDiv = document.getElementById( curObj.id );
 
var intTop = window.event.clientY;
 
var intLeft = window.event.clientX;
 
if( cX == -1 )
 {
  cY 
= intTop - objDiv.style.pixelTop;
  cX 
= intLeft - objDiv.style.pixelLeft;
 }
 objDiv.style.pixelTop  
= intTop - cY;
 objDiv.style.pixelLeft 
= intLeft - cX;
 window.event.cancelBubble 
= false;
 window.event.returnValue 
= false;
}
//***********move filter Div code end..
</SCRIPT>
</HEAD>
<BODY onMouseMove="JavaScript:MM()" >
<div style="CURSOR:move; POSITION:absolute; z-index:7;">
<TABLE ID="table1" BORDER COLS=3  style="  POSITION:absolute;z-index:7;font-size:12px;background:#ef9b5b;">
<tr><td colspan="2" id="filterTitle" 
style
="cursor:move;border-bottom:#333333 1px solid;height:23px;background:#ef9b5b; "
 onMouseDown
="JavaScript:MD('table1')" onMouseUp="JavaScript:MU()"></td></tr>
<TR><TD>Column 1</TD><TD>Column 2</TD></TR>
</TABLE>
</div>
</body>
</html>
原文地址:https://www.cnblogs.com/ymyglhb/p/1263615.html