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>
效果不错
Because of the cache,you may see your comments several minutes later.