Make drag inheritable

darcs-hash:20091127112402-e4919-dc8340c03ef2d3b242302dcc228d56539eaf9e28.gz

lib/scripts/drag.js

 /**
  * 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 = {
     }
 
 };
-