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

本文链接：https://blog.youkuaiyun.com/dotnet90/article/details/968600

本文展示了一个使用HTML和JavaScript创建的简单交互式表格。通过鼠标操作实现表格的显示与移动，介绍了基本的DOM操作及事件处理技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>