diff --git a/lib/scripts/drag.js b/lib/scripts/drag.js index 4726b77de93f1cc264f7802c8de351e120849a23..fa249a99679ef5e0630871fdee1f145bdf63f77c 100644 --- a/lib/scripts/drag.js +++ b/lib/scripts/drag.js @@ -1,8 +1,9 @@ /** * Makes a DOM object draggable * - * This is currently for movable DOM dialogs only. If needed it could be - * extended to execute callbacks on special events... + * If you just want to move objects around, use drag.attach. For full + * customization, drag can be used as a javascript prototype, it is + * inheritance-aware. * * @link http://nofunc.org/Drag_Drop/ */ @@ -26,33 +27,36 @@ var drag = { attach: function (obj,handle) { if(handle){ handle.dragobject = obj; - addEvent($(handle),'mousedown',drag.start); }else{ - addEvent($(obj),'mousedown',drag.start); + handle = obj; } + var _this = this; + addEvent($(handle),'mousedown',function (e) {return _this.start(e); }); }, /** * Starts the dragging operation */ start: function (e){ - drag.handle = e.target; - if(drag.handle.dragobject){ - drag.obj = drag.handle.dragobject; + this.handle = e.target; + if(this.handle.dragobject){ + this.obj = this.handle.dragobject; }else{ - drag.obj = drag.handle; + this.obj = this.handle; } - drag.handle.className += ' ondrag'; - drag.obj.className += ' ondrag'; + this.handle.className += ' ondrag'; + this.obj.className += ' ondrag'; - drag.oX = parseInt(drag.obj.style.left); - drag.oY = parseInt(drag.obj.style.top); - drag.eX = drag.evX(e); - drag.eY = drag.evY(e); + this.oX = parseInt(this.obj.style.left); + this.oY = parseInt(this.obj.style.top); + this.eX = drag.evX(e); + this.eY = drag.evY(e); - addEvent(document,'mousemove',drag.drag); - addEvent(document,'mouseup',drag.stop); + var _this = this; + this.mousehandlers = [function (e) {return _this.drag(e);}, function (e) {return _this.stop(e);}]; + addEvent(document,'mousemove', this.mousehandlers[0]); + addEvent(document,'mouseup', this.mousehandlers[1]); e.preventDefault(); e.stopPropagation(); @@ -63,21 +67,21 @@ var drag = { * Ends the dragging operation */ stop: function(){ - drag.handle.className = drag.handle.className.replace(/ ?ondrag/,''); - drag.obj.className = drag.obj.className.replace(/ ?ondrag/,''); - removeEvent(document,'mousemove',drag.drag); - removeEvent(document,'mouseup',drag.stop); - drag.obj = null; - drag.handle = null; + this.handle.className = this.handle.className.replace(/ ?ondrag/,''); + this.obj.className = this.obj.className.replace(/ ?ondrag/,''); + removeEvent(document,'mousemove', this.mousehandlers[0]); + removeEvent(document,'mouseup', this.mousehandlers[1]); + this.obj = null; + this.handle = null; }, /** * Moves the object during the dragging operation */ drag: function(e) { - if(drag.obj) { - drag.obj.style.top = (drag.evY(e)+drag.oY-drag.eY+'px'); - drag.obj.style.left = (drag.evX(e)+drag.oX-drag.eX+'px'); + if(this.obj) { + this.obj.style.top = (this.evY(e)+this.oY-this.eY+'px'); + this.obj.style.left = (this.evX(e)+this.oX-this.eX+'px'); } }, @@ -96,4 +100,3 @@ var drag = { } }; -