八零在线优社区

 找回密码
 帐号注册

QQ登录

只需一步,快速开始

搜索
热搜: PhotoShop
查看: 204|回复: 0

JS面向对象的拖拽写法源码

[复制链接]
发表于 2015-9-28 18:24:38 | 显示全部楼层 |阅读模式
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>JS面向对象的拖拽写法源码</title>
  6. <style>
  7. #div1{ width:100px; height:100px; background:red; position:absolute;}
  8. </style>
  9. <script>

  10. window.onload = function(){
  11.        
  12.         var d1 = new Drag('div1');
  13.         d1.init();
  14.        
  15. };

  16. function Drag(id){
  17.         this.oDiv = document.getElementById(id);
  18.         this.disX = 0;
  19.         this.disY = 0;
  20. }
  21. Drag.prototype.init = function(){
  22.        
  23.         var This = this;
  24.        
  25.         this.oDiv.onmousedown = function(ev){
  26.                 var ev = ev || window.event;
  27.                 This.fnDown(ev);       
  28.                 return false;
  29.         };
  30. };
  31. Drag.prototype.fnDown = function(ev){
  32.        
  33.         var This = this;
  34.         this.disX = ev.clientX - this.oDiv.offsetLeft;
  35.         this.disY = ev.clientY - this.oDiv.offsetTop;
  36.        
  37.         document.onmousemove = function(ev){
  38.                 var ev = ev || window.event;
  39.                 This.fnMove(ev);
  40.         };
  41.         document.onmouseup = this.fnUp;
  42.        
  43. };
  44. Drag.prototype.fnMove = function(ev){
  45.         this.oDiv.style.left = ev.clientX - this.disX + 'px';
  46.         this.oDiv.style.top = ev.clientY - this.disY + 'px';
  47. };
  48. Drag.prototype.fnUp = function(){
  49.         document.onmousemove = null;
  50.         document.onmouseup = null;
  51. };

  52. </script>
  53. </head>

  54. <body>
  55. <div id="div1"></div>
  56. </body>
  57. </html>
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 帐号注册

本版积分规则

QQ|小黑屋|手机版|八零在线优社区 ( 赣ICP备15001736号-2 )

GMT+8, 2018-5-28 03:24

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表