拖动复习

来源：互联网发布：同城交友源码带数据编辑：程序博客网时间：2024/06/09 19:02
Drag复习：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head>  <title> Drag 2 </title> </head> <style type="text/css">*{ margin: 0; padding: 0;}body{ width: 100%; height: 100%;}#Drag{ cursor: move;  width: 120px; height: 120px; border: 1px solid #ddd; background: #f2f2f2;  z-index: 10; font-size: 12px;} </style> <script type="text/javascript">var isIe = (document.all) ? true : false;var $ = function (id) {return "string" == typeof id ? document.getElementById(id) : id;};//prototype Class var Class = {create : function (){return function(){ this.initialize.apply(this,arguments); }}};var Bind = function(object,fun){return function(){return fun.apply(object,arguments);}}var BindAsEventListener = function(object,fun){return function(event){return fun.call(object, (event || window.event));}}function addEventHandler(oTarget , sEventType , fnHandler){if(oTarget.addEventListener){oTarget.addEventListener(sEventType, fnHandler);} else if(oTarget.attachEvent){oTarget.attachEvent("on" + sEventType , fnHandler);}else{oTarget["on" + 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 _Drag = Class.create();_Drag.prototype = {initialize : function(drag){this.Drag = $(drag)this._x = this._y = 0;this._fM = BindAsEventListener(this,this.Move);this._fS = BindAsEventListener(this,this.Stop);this.Drag.style.position = "absolute";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";this.Drag.innerHTML = "X:" + oEvent.clientX + ",Y:" + oEvent.clientY;},Stop : function(){removeEventHandler(document,"mousemove",this._fM);removeEventHandler(document,"mouseup",this._fS);}};window.onload = function(){new _Drag("Drag");} </script> <body><div id="Drag"></div> </body></html>