Script lib for draggable DOM objects

Ignore-this: 907af01f2757cc494d2c54d8e4d7b9d1

This adds a simple object that can be attached to positioned DOM objects
to make them draggable. This is useful for inplace dialogs.

note: development was part of the ICKE 2.0 project see
      http://www.icke-projekt.de for info

darcs-hash:20090812102055-6e07b-88451d4d67877224950a289b9cd415544f4c2755.gz

2 files changed, 98 insertions, 0 deletions

diff --git a/lib/exe/js.php b/lib/exe/js.php
index 7c5ad021c..96c7c6e77 100644
--- a/lib/exe/js.php
+++ b/lib/exe/js.php
@@ -48,6 +48,7 @@ function js_out(){
                 DOKU_INC.'lib/scripts/tw-sack.js',
                 DOKU_INC.'lib/scripts/ajax.js',
                 DOKU_INC.'lib/scripts/index.js',
+                DOKU_INC.'lib/scripts/drag.js',
              );
     if($edit){
         if($write){
diff --git a/lib/scripts/drag.js b/lib/scripts/drag.js
new file mode 100644
index 000000000..aefe8af52
--- /dev/null
+++ b/lib/scripts/drag.js
@@ -0,0 +1,97 @@
+/**
+ * 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...
+ *
+ * @link http://nofunc.org/Drag_Drop/
+ */
+drag = {
+    obj: null,
+    handle: null,
+    oX: 0,  // object X position
+    oY: 0,  // object Y position
+    eX: 0,  // event X delta
+    eY: 0,  // event Y delta
+
+    /**
+     * Attaches the needed handlers to the given object
+     *
+     * This can be called for multiple objects, the right one is later
+     * determined from the event itself. The handle is optional
+     *
+     * @param DOMObject obj    The object that should be draggable
+     * @param DOMObject handle A handle on which the obj can be dragged
+     */
+    attach: function (obj,handle) {
+        if(handle){
+            handle.dragobject = obj;
+            addEvent($(handle),'mousedown',drag.start);
+        }else{
+            addEvent($(obj),'mousedown',drag.start);
+        }
+    },
+
+    /**
+     * Starts the dragging operation
+     */
+    start: function (e){
+        drag.handle = e.target;
+        drag.handle.style.cursor = 'move';
+
+        if(drag.handle.dragobject){
+            drag.obj = drag.handle.dragobject;
+        }else{
+            drag.obj = drag.handle;
+        }
+
+        drag.oX = parseInt(drag.obj.style.left);
+        drag.oY = parseInt(drag.obj.style.top);
+        drag.eX = drag.evX(e);
+        drag.eY = drag.evY(e);
+
+        addEvent(document,'mousemove',drag.drag);
+        addEvent(document,'mouseup',drag.stop);
+
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+    },
+
+    /**
+     * Ends the dragging operation
+     */
+    stop: function(){
+        drag.handle.style.cursor = '';
+        removeEvent(document,'mousemove',drag.drag);
+        removeEvent(document,'mouseup',drag.stop);
+        drag.obj = null;
+        drag.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');
+        }
+    },
+
+    /**
+     * Returns the X position of the given event.
+     */
+    evX: function(e){
+        return (e.pageX) ? e.pageX : e.clientX + document.body.scrollTop; //fixme shouldn't this be scrollLeft?
+    },
+
+    /**
+     * Returns the Y position of the given event.
+     */
+    evY: function(e){
+        return (e.pageY) ? e.pageY : e.clientY + document.body.scrollTop;
+    },
+
+};
+