lib/scripts/drag.js

   1 /**
   2  * Makes a DOM object draggable
   3  *
   4  * This is currently for movable DOM dialogs only. If needed it could be
   5  * extended to execute callbacks on special events...
   6  *
   7  * @link http://nofunc.org/Drag_Drop/
   8  */
   9 var drag = {
  10     obj: null,
  11     handle: null,
  12     oX: 0,  // object X position
  13     oY: 0,  // object Y position
  14     eX: 0,  // event X delta
  15     eY: 0,  // event Y delta
  16
  17     /**
  18      * Attaches the needed handlers to the given object
  19      *
  20      * This can be called for multiple objects, the right one is later
  21      * determined from the event itself. The handle is optional
  22      *
  23      * @param DOMObject obj    The object that should be draggable
  24      * @param DOMObject handle A handle on which the obj can be dragged
  25      */
  26     attach: function (obj,handle) {
  27         if(handle){
  28             handle.dragobject = obj;
  29             addEvent($(handle),'mousedown',drag.start);
  30         }else{
  31             addEvent($(obj),'mousedown',drag.start);
  32         }
  33     },
  34
  35     /**
  36      * Starts the dragging operation
  37      */
  38     start: function (e){
  39         drag.handle = e.target;
  40         if(drag.handle.dragobject){
  41             drag.obj = drag.handle.dragobject;
  42         }else{
  43             drag.obj = drag.handle;
  44         }
  45
  46         drag.handle.className += ' ondrag';
  47         drag.obj.className    += ' ondrag';
  48
  49         drag.oX = parseInt(drag.obj.style.left);
  50         drag.oY = parseInt(drag.obj.style.top);
  51         drag.eX = drag.evX(e);
  52         drag.eY = drag.evY(e);
  53
  54         addEvent(document,'mousemove',drag.drag);
  55         addEvent(document,'mouseup',drag.stop);
  56
  57         e.preventDefault();
  58         e.stopPropagation();
  59         return false;
  60     },
  61
  62     /**
  63      * Ends the dragging operation
  64      */
  65     stop: function(){
  66         drag.handle.className = drag.handle.className.replace(/ ?ondrag/,'');
  67         drag.obj.className    = drag.obj.className.replace(/ ?ondrag/,'');
  68         removeEvent(document,'mousemove',drag.drag);
  69         removeEvent(document,'mouseup',drag.stop);
  70         drag.obj = null;
  71         drag.handle = null;
  72     },
  73
  74     /**
  75      * Moves the object during the dragging operation
  76      */
  77     drag: function(e) {
  78         if(drag.obj) {
  79             drag.obj.style.top  = (drag.evY(e)+drag.oY-drag.eY+'px');
  80             drag.obj.style.left = (drag.evX(e)+drag.oX-drag.eX+'px');
  81         }
  82     },
  83
  84     /**
  85      * Returns the X position of the given event.
  86      */
  87     evX: function(e){
  88         return (e.pageX) ? e.pageX : e.clientX + document.body.scrollTop; //fixme shouldn't this be scrollLeft?
  89     },
  90
  91     /**
  92      * Returns the Y position of the given event.
  93      */
  94     evY: function(e){
  95         return (e.pageY) ? e.pageY : e.clientY + document.body.scrollTop;
  96     }
  97
  98 };
  99