• JavaScript拖拽实现（附注释），最经典！最简单！短小精悍！

    文章转载自：http://blog.csdn.net/sunxing007/archive/2009/04/22/4100840.aspx，由笑的自然最后编辑

    效果预览：

    实现源代码：

    [xhtml] view plaincopy
     
    1. <html>  
    2. <head>  
    3. <title>Drag[笑的自然最后修改编辑]</title>  
    4. </head>  
    5. <body>  
    6. <a href="http://blog.csdn.net/xxd851116" mce_href="http://blog.csdn.net/xxd851116">笑的自然最后修改编辑</a>  
    7. <div id="r" style="position:absolute; left:100px; top:100px; background-color:#F00; height:80px; 80px; cursor: pointer;"></div>  
    8. <div id="g" style="position:absolute; left:250px; top:100px; background-color:#0F0; height:80px; 80px; cursor: pointer;"></div>  
    9. <div id="b" style="position:absolute; left:400px; top:100px; background-color:#00F; height:80px; 80px; cursor: pointer;"></div>  
    10. <mce:script type="text/javascript"><!--  
    11. var Drag = {  
    12.     //当前被drag的对象  
    13.     obj: null,  
    14.     //初始化  
    15.     init: function(id){  
    16.         var o = document.getElementById(id);  
    17.         //当onmousedown开始拖拽  
    18.         o.onmousedown = Drag.start;  
    19.     },  
    20.     start: function(e){  
    21.         var o = Drag.obj = this;  
    22.         //lastMouseX，lastMouseY记录上次鼠标的位置  
    23.         o.lastMouseX = Drag.getEvent(e).x;  
    24.         o.lastMouseY = Drag.getEvent(e).y;  
    25.         //当onmousemove开始移动  
    26.         document.onmousemove = Drag.move;  
    27.         //当onmouseup终止拖拽  
    28.         document.onmouseup = Drag.end;  
    29.     },  
    30.     move: function(e){  
    31.         var o = Drag.obj;  
    32.         //dx, dy表示鼠标移动的距离  
    33.         var dx = Drag.getEvent(e).x - o.lastMouseX;  
    34.         var dy = Drag.getEvent(e).y - o.lastMouseY;  
    35.         //因为element.style.left通常返回的结果是'200px'的形式，所以要用parseInt转化  
    36.         var left = parseInt(o.style.left) + dx ;  
    37.         var top = parseInt(o.style.top) + dy;  
    38.         o.style.left = left;  
    39.         o.style.top = top;  
    40.         o.lastMouseX = Drag.getEvent(e).x;  
    41.         o.lastMouseY = Drag.getEvent(e).y;  
    42.     },  
    43.     end: function(e){  
    44.         document.onmousemove = null;  
    45.         document.onMouseup = null;  
    46.         Drag.obj = null;  
    47.     },  
    48.     //辅助函数，处理IE和FF不同的event模型  
    49.     getEvent: function(e){  
    50.         if (typeof e == 'undefined'){  
    51.             e = window.event;  
    52.         }  
    53.         //alert(e.x?e.x : e.layerX);  
    54.         if(typeof e.x == 'undefined'){  
    55.             ee.x = e.layerX;//复制了n遍，到了csdn就变成ee.x了  
    56.         }  
    57.         if(typeof e.y == 'undefined'){  
    58.             ee.y = e.layerY;//复制了n遍，到了csdn就变成ee.x了  
    59.         }  
    60.         return e;  
    61.     }  
    62. };  
    63.   
    64. //测试代码开始，使三个div具有drag and drop的能力。  
    65. Drag.init('r');  
    66. Drag.init('g');  
    67. Drag.init('b');  
    68. // --></mce:script>  
    69. </body>  
    70. </html>  
  • 相关阅读:
    变量的创建和初始化
    HDU 1114 Piggy-Bank （dp）
    HDU 1421 搬寝室 （dp）
    HDU 2059 龟兔赛跑 （dp）
    HDU 2571 命运 (dp)
    HDU 1574 RP问题 (dp)
    HDU 2577 How to Type (字符串处理）
    HDU 1422 重温世界杯 （dp）
    HDU 2191 珍惜现在，感恩生活 （dp）
    HH实习 acm算法部 1689
  • 原文地址：https://www.cnblogs.com/mfryf/p/3098254.html
Copyright © 2020-2023  润新知