JS实现拖动对象的代码

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

      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>
评论
  • Re:JS实现拖动对象的代码  (2006/6/26 13:07:33) by 1 
    利用鼠标事件引发。
  • Re:JS实现拖动对象的代码  (2006/7/6 15:05:16) by cao 
    不错,已经登峰造极了....
  • Re:JS实现拖动对象的代码  (2007/6/19 16:12:13) by tan 
    可惜只在IE有效
  • Re:JS实现拖动对象的代码  (2008/9/20 9:17:58) by 黄云锋 
    不知道效果是什么样的,弄来看看
  • Re:JS实现拖动对象的代码  (2008/11/25 3:08:57) by zhan 
    好东西要多多支持
     
  • Re:JS实现拖动对象的代码  (2009/2/28 10:49:52) by ylp1588 
    移动效果还不错,只测试了IE,不知道其它浏览器的效果如何!
  • Re:JS实现拖动对象的代码  (2009/3/30 16:55:44) by aghlqp 
    试了下,感觉还不错
     
  • Re:JS实现拖动对象的代码  (2009/9/15 11:21:48) by samuh 

    效果不错

  • Re:JS实现拖动对象的代码  (2010/6/6 12:55:25) by wxq1404 
    试了下,感觉还不错
标 题:
 
姓 名:
 
主 页:

验证码:

评论:
 

Because of the cache,you may see your comments several minutes later.