DragDrop
2009-09-21 17:50 BlueDream 阅读(377) 评论(0) 编辑 收藏 举报Handler
代码:
<!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> <title> DragDrop </title> <style type="text/css"> body { padding: 0px; margin: 0px; font-size: 12px; } #drager { width: 150px; height: 100px; background-color: #85053C; } #handler { width: 100%; height: 30px; background-color: #FFCC66; text-align: center; } </style> <script type="text/javascript"> var $ = function(id) { return 'string' == typeof id ? document.getElementById(id) : id; } var $d = (document.compatMode == "CSS1Compat") ? document.documentElement : document.body; var isIE = navigator.userAgent.indexOf('MSIE') != -1; function addEvent(oTarget, sType, fnHandler){ if(window.attachEvent){ oTarget.attachEvent("on"+sType, fnHandler) }else if(window.addEventListener){ oTarget.addEventListener(sType, fnHandler, false); }else{ oTarget["on"+sType] = fnHandler; } } function removeEvent(oTarget, sType, fnHandler){ if(window.detachEvent){ oTarget.detachEvent("on"+sType, fnHandler); }else if(window.removeEventListener){ oTarget.removeEventListener(sType, fnHandler, false); }else { oTarget["on"+sType] = null; } } var Extend = function(destination, source){ for(var pro in source){ destination[pro] = source[pro]; } return destination; } var Bind = function(object, fun){ var args = Array.prototype.slice.call(arguments, 2); return function(){ return fun.apply(object, args.concat(Array.prototype.slice.call(arguments))); } } var BindAsEventListener = function(object, fun){ var args = Array.prototype.slice.call(arguments, 2); return function(event){ return fun.apply(object, [event || window.event].concat(args)); } } var Class = { create: function(){ return function(){ this.initialize.apply(this, arguments); } } } var Drag = Class.create(); Drag.prototype = { initialize: function(dragId, options){ var oThis = this; this.Drager = $(dragId); this.DisX = this.DisY = 0; this.SetOptions(options); Extend(this, this.options); this.o = this.Handler || this.Drager; with(this.Drager.style){position = position != "absolute" && "absolute"}; this._fM = BindAsEventListener(this, this.MouseMove); this._fU = Bind(this, this.MouseUp); addEvent(this.o, "mousedown", BindAsEventListener(this, oThis.MouseDown)); addEvent(this.o, "mouseover", function(){oThis.o.style.cursor = "pointer"}); }, SetOptions: function(options){ this.options = { isLockX: false, isLockY: false, isLock: false, isResize: true, isLimit: true, Handler: $('handler') }; Extend(this.options, options || {}); }, MouseDown: function(event){ if(this.isLock) { this.MouseUp(); return;} this.DisX = event.clientX - this.Drager.offsetLeft; this.DisY = event.clientY - this.Drager.offsetTop; isIE && this.Drager.setCapture(); addEvent(document,"mousemove",this._fM); addEvent(document,"mouseup",this._fU); }, MouseMove: function(event){ window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); var iLeft = event.clientX - this.DisX; var iTop = event.clientY - this.DisY; if(this.isLimit){ var mxLeft = 0; var mxRight = $d.clientWidth; var mxTop = 0; var mxBottom = $d.clientHeight; iLeft = Math.max(Math.min(iLeft, mxRight - this.Drager.offsetWidth), mxLeft); iTop = Math.max(Math.min(iTop, mxBottom - this.Drager.offsetHeight), mxTop); } if(!this.isLockX) { this.Drager.style.left = iLeft + "px" }; if(!this.isLockY) { this.Drager.style.top = iTop + "px" }; }, MouseUp: function(){ removeEvent(document,"mousemove",this._fM); removeEvent(document,"mouseup",this._fU); isIE && this.Drager.releaseCapture(); } } </script> </head> <body> <div id="drager"> <div id="handler"> Handler </div> </div> <script type="text/javascript"> var drag = new Drag('drager', {isLimit:true}); </script> </body> </html>