拖动的层的javascript实现-优快云博客

本文介绍了一种使用JavaScript和HTML实现表格拖动效果的方法。通过监听鼠标事件，包括按下、移动和释放，来调整表格的位置，使得表格可以跟随鼠标的移动而移动。此功能适用于需要灵活调整布局的应用场景。

<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/archive/2008/08/08/1263615.html