面向对象的拖拽
2017-03-21 22:24
127 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> #box{width:100px;height:100px;background:red;position:absolute;} </style> <script> window.onload = function () { var d1 = new Drag('box'); d1.init(); } function Drag(id) { this.oBox = document.getElementById(id); this.disX = 0; this.disY = 0; } Drag.prototype.init = function() { var _this = this; this.oBox.onmousedown = function (ev) { var ev = ev || window.event; _this.fnDown(ev); return false; }; } Drag.prototype.fnDown = function (ev) { this.disX = ev.clientX - this.oBox.offsetLeft; this.disY = ev.clientY - this.oBox.offsetTop; var _this = this; document.onmousemove = function (ev){ var ev = ev || window.event; _this.fnMove(ev); }; document.onmouseup = function () { _this.fnUp(); }; } Drag.prototype.fnMove = function (ev) { this.oBox.style.left = ev.clientX - this.disX + 'px'; this.oBox.style.top = ev.clientY - this.disY + 'px'; } Drag.prototype.fnUp = function () { document.onmousemove = document.onmousedown = null; } </script> </head> <body> <div id="box"></div> </body> </html>
相关文章推荐
- JS基于面向对象实现的拖拽库实例
- 面向对象的继承与修改(拖拽实例)
- 用面向对象写程序之“完美”拖拽
- 面向对象的拖拽
- Javascript面向对象及组件的详细介绍(三)面向对象的拖拽
- JS基于面向对象实现的拖拽功能示例
- js面向对象(json对象、继承、面向对象拖拽)
- js拖拽面向对象
- 面向对象的拖拽
- JavaScript面向对象的程序之拖拽组件的开发Demo——xyp_hf
- JS----拖拽图层,面向过程,面向对象
- JS基于面向对象实现的拖拽功能示例
- js面向对象---拖拽
- 面向对象的拖拽
- 用js面向对象写拖拽
- 面向对象实战之封装拖拽对象
- 前端基础进阶(十):面向对象实战之封装拖拽对象
- 拖拽系列二、利用JS面向对象OOP思想实现拖拽封装
- JS基于面向对象实现的拖拽库实例
- 面向对象的拖拽