JS实现拖动对象的代码--踢西工作室

JS实现拖动对象的代码

时间：2006/5/30 9:55:05 阅读：4664

JS实现拖动对象的代码，珍藏已久的精典代码，可以随意把定义的表格拖动

 1<SCRIPT LANGUAGE="JavaScript">...
 2<!--
 3var currentMoveObj = null;    //当前拖动对象
 4var relLeft;    //鼠标按下位置相对对象位置
 5var relTop;
 6function f_mdown(obj)
 7...{
 8    currentMoveObj = obj;        //当对象被按下时，记录该对象
 9    currentMoveObj.style.position = "absolute";
10    relLeft = event.x - currentMoveObj.style.pixelLeft;
11    relTop = event.y - currentMoveObj.style.pixelTop;
12}
13window.document.onmouseup = function()
14...{
15    currentMoveObj = null;    //当鼠标释放时同时释放拖动对象
16}
17function f_move(obj)
18...{
19    if(currentMoveObj != null)
20    ...{
21        currentMoveObj.style.pixelLeft=event.x-relLeft;
22        currentMoveObj.style.pixelTop=event.y-relTop;
23    }
24}
25
26//-->
27</SCRIPT>
28<BODY>
29<TABLE width="150" border=1 onselectstart="return false"
30 style="position:absolute;left:50;top:50" onmousedown="f_mdown(this)" onmousemove="f_move(this)">
31<TR>
32    <TD bgcolor="#CCCCCC" align="center" style="cursor:move">www.web3.cn标题1</TD>
33</TR>
34<TR>
35    <TD align="center" height="60">内容1</TD>
36</TR>
37</TABLE>
38<TABLE width="150" border=1 onselectstart="return false" style="position:absolute;left:350;top:250"
39 onmousedown="f_mdown(this)" onmousemove="f_move(this)">
40<TR>
41    <TD bgcolor="#CCCCCC" align="center" style="cursor:move">www.web3.cn标题2</TD>
42</TR>
43<TR>
44    <TD align="center" height="60">内容2</TD>
45</TR>
46</TABLE>
47</BODY>