zoukankan      html  css  js  c++  java

  • JavaScript实现网页元素的拖拽效果

     

     

     

    下面的页面中放了两个div，可以通过鼠标拖拽这两个元素到任意位置。

    实现该效果的HTML页面代码如下所示：

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
     
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head lang="en">  
    4.     <meta charset="UTF-8">  
    5.     <title></title>  
    6.     <style type="text/css">  
    7.         #xixi {  
    8.             200px; height: 200px; position:absolute;  
    9.             left: 50px; top: 50px; background-color: lightcyan;  
    10.         }  
    11.         #haha {  
    12.             position:absolute; left:300px; top:300px;  
    13.             background-color: yellow; 200px; height: 200px;  
    14.         }  
    15.   
    16.     </style>  
    17.     <script type="text/javascript" src="js/mylib.js"></script>  
    18.     <script type="text/javascript">  
    19.         window.onload = function() {  
    20.             var obj1 = createDraggableObject();  
    21.             var obj2 = createDraggableObject();  
    22.             obj1.init($('xixi'));  
    23.             obj2.init($('haha'));  
    24.         };  
    25.     </script>  
    26.   
    27. </head>  
    28. <body>  
    29.     <div id="xixi">Fuck!</div>  
    30.     <div id="haha">Shit!</div>  
    31. </body>  
    32. </html>  

    外部JavaScript文件代码如下所示：
    [javascript] view plaincopy在CODE上查看代码片派生到我的代码片
     
    1. /** 
    2.  * 根据id获取页面元素 
    3.  * @param id 
    4.  * @returns {HTMLElement} 
    5.  */  
    6. function $(id) {  
    7.     return document.getElementById(id);  
    8. }  
    9.   
    10. /** 
    11.  * 创建可拖拽对象的工厂方法 
    12.  */  
    13. function createDraggableObject() {  
    14.     return {  
    15.         obj: null, left: 0, top: 0,  
    16.         oldX: 0, oldY: 0, isMouseLeftButtonDown: false,  
    17.         init: function (obj) {  
    18.             this.obj = obj;  
    19.             var that = this;  
    20.             this.obj.onmousedown = function (args) {  
    21.                 var evt = args || event;  
    22.                 this.style.zIndex = 100;  
    23.                 that.isMouseLeftButtonDown = true;  
    24.                 that.oldX = evt.clientX;  
    25.                 that.oldY = evt.clientY;  
    26.                 if (this.currentStyle) {  
    27.                     that.left = parseInt(this.currentStyle.left);  
    28.                     that.top = parseInt(this.currentStyle.top);  
    29.                 }  
    30.                 else {  
    31.                     var divStyle = document.defaultView.getComputedStyle(this, null);  
    32.                     that.left = parseInt(divStyle.left);  
    33.                     that.top = parseInt(divStyle.top);  
    34.                 }  
    35.             };  
    36.             this.obj.onmousemove = function (args) {  
    37.                 that.move(args || event);  
    38.             };  
    39.             this.obj.onmouseup = function () {  
    40.                 that.isMouseLeftButtonDown = false;  
    41.                 this.style.zIndex = 0;  
    42.             };  
    43.         },  
    44.         move: function (evt) {  
    45.             if (this.isMouseLeftButtonDown) {  
    46.                 var dx = parseInt(evt.clientX - this.oldX);  
    47.                 var dy = parseInt(evt.clientY - this.oldY);  
    48.                 this.obj.style.left = (this.left + dx) + 'px';  
    49.                 this.obj.style.top = (this.top + dy) + 'px';  
    50.             }  
    51.         }  
    52.     };  
    53. }  
  • 相关阅读:
    NO OO NO LIFE：OO第二单元总结
    凡为过往，皆是序章——软工全系列个人总结
    Think on 小黄衫
    软工-结对编程作业#3
    你问我答，不亦乐乎——软工案例分析作业
    软工-结对编程作业#2
    软工-结对编程作业#1
    道法之间——软工第2次博客作业
    软工-个人阅读作业#1
    OO_Unit4 UML模型化设计总结
  • 原文地址：https://www.cnblogs.com/lpw94/p/4976754.html
Copyright © 2011-2022 走看看