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>  
  • 相关阅读:
    VMware虚拟机的三种连接方式
    Codeblocks16.01配置wxWidgets3.0.4
    DAO编程（VC6.0中的应用）
    VC++ 中用ado连接数据库
    C中文件的输入输出与C++的文件流
    Cpp中流继承关系
    a标签置灰不可点击
    手动操作数据库
    $.ajaxFileUpload is not a function
    【工具】手机号码、电话号码正则表达式
  • 原文地址：https://www.cnblogs.com/mfryf/p/3098254.html
Copyright © 2011-2022 走看看