<!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> </head> <body> <script type="text/JavaScript"> <!-- var isIE = (document.all) ? true : false;// 是否ie var $ = function (id) { //返回id对象 return "string" == typeof id ? document.getElementById(id) : id; }; var Class = { // 带构造方法的类 create: function() { return function() { this.initialize.apply(this, arguments); } //用apply应用下面的initialize初始化属性 } } var Extend = function(destination, source) { //继承 for (var property in source) { destination[property] = source[property]; } } var Bind = function(object, fun) { return function() { return fun.apply(object, arguments); } } /** 用object对象调用fun参数是event||window event **/ var BindAsEventListener = function(object, fun) { return function(event) { return fun.call(object, (event || window.event)); } } /** 添加帧听器事件 @oTarget 目标对象 @sEventType 事件类型 @fnHandler 目标触发事件对象 **/ function addEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.addEventListener) { oTarget.addEventListener(sEventType, fnHandler, false);//firefox } else if (oTarget.attachEvent) { oTarget.attachEvent("on" + sEventType, fnHandler);//ie } else { oTarget["on" + sEventType] = fnHandler;//other } }; /** 清除添加的帧听器事件 @oTarget 目标对象 @sEventType 事件类型 @fnHandler 目标触发事件对象 **/ function removeEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.removeEventListener) { oTarget.removeEventListener(sEventType, fnHandler, false); } else if (oTarget.detachEvent) { oTarget.detachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = null; } }; /*------------------------------相关模型构造完毕-----------------------------------*/ //拖放程序 var SimpleDrag = Class.create(); SimpleDrag.prototype = { //拖放对象,触发对象,初始化 initialize: function(drag) { this.Drag = $(drag); this._x = this._y = 0; this._fM = BindAsEventListener(this, this.Move);//_fM方法就是应用MOVE方法参数是event||window.event this._fS = Bind(this, this.Stop);//_fS类方法就是Stop方法 this.Drag.style.position = "absolute"; this.Drag.style.cursor = "move"; addEventHandler(this.Drag, "mousedown", BindAsEventListener(this, this.Start)); }, //准备拖动 Start: function(oEvent) { this._x = oEvent.clientX - this.Drag.offsetLeft; this._y = oEvent.clientY - this.Drag.offsetTop; addEventHandler(document, "mousemove", this._fM); addEventHandler(document, "mouseup", this._fS); }, //拖动 Move: function(oEvent) { this.Drag.style.left = oEvent.clientX - this._x + "px"; this.Drag.style.top = oEvent.clientY - this._y + "px"; }, //停止拖动 Stop: function() { removeEventHandler(document, "mousemove", this._fM); removeEventHandler(document, "mouseup", this._fS); } }; // --> </script> <div></div> <script type="text/javascript"> <!-- new SimpleDrag("idDrag"); // --> </script> </body> </html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》