zoukankan      html  css  js  c++  java

  • 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>  
  • 相关阅读:
    BZOJ 1191 HNOI2006 超级英雄hero
    BZOJ 2442 Usaco2011 Open 修建草坪
    BZOJ 1812 IOI 2005 riv
    OJ 1159 holiday
    BZOJ 1491 NOI 2007 社交网络
    NOIP2014 D1 T3
    BZOJ 2423 HAOI 2010 最长公共子序列
    LCA模板
    NOIP 2015 D1T2信息传递
    数据结构
  • 原文地址：https://www.cnblogs.com/mfryf/p/3098254.html
Copyright © 2011-2022 走看看