moving template around

(is now a lot closer to the original, shouldn't require updating new
scripts as the structure should fit)
also some minor bugfixes

static/js/Draggable.js

@@ -0,0 +1,229 @@
+var Draggable = new function () {
+    var
+        start = {},
+        mouse = {},
+        clickObj,
+        dragObj;
+
+    function onMouseDown(e) {
+        e = $WH.$E(e);
+
+        if (this._handle) {
+            var _ = e._target,
+            found = false,
+            i = 0;
+
+            while (_ && i <= 3) {
+                if (_ == this._handle) {
+                    found = true;
+                    break;
+                }
+
+                _ = _.parentNode;
+                ++i;
+            }
+
+            if (!found) {
+                return false;
+            }
+        }
+
+        clickObj = this;
+
+        start = $WH.g_getCursorPos(e);
+
+        $WH.aE(document, 'mousemove', onMouseMove);
+        $WH.aE(document, 'mouseup', onMouseUp);
+
+        if (clickObj.onClick) {
+            clickObj.onClick(e, clickObj);
+        }
+
+        return false;
+    }
+
+    function onMouseMove(e) {
+        e = $WH.$E(e);
+
+        var pos = $WH.g_getCursorPos(e);
+
+        if (clickObj) {
+            if (Math.abs(pos.x - start.x) > 5 || Math.abs(pos.y - start.y) > 5) {
+                onDragStart(e, clickObj);
+                clickObj = null;
+            }
+        }
+
+        if (!dragObj || !dragObj._bounds) {
+            return false;
+        }
+
+        var
+            bounds = getBounds(dragObj),
+            dX     = pos.x - start.x,
+            dY     = pos.y - start.y;
+
+        dX = Math.max(dragObj._bounds.x1 - mouse.x, Math.min(dragObj._bounds.x2 - mouse.x - (bounds.x2 - bounds.x1), dX));
+        dY = Math.max(dragObj._bounds.y1 - mouse.y, Math.min(dragObj._bounds.y2 - mouse.y - (bounds.y2 - bounds.y1), dY));
+
+        setPosition(dX, dY);
+
+        return false;
+    }
+
+    function onMouseUp(e) {
+        e = $WH.$E(e);
+
+        clickObj = null;
+
+        if (dragObj) {
+            onDragEnd(e);
+        }
+    }
+
+    function onDragStart(e, obj) {
+        if (dragObj) {
+            onDragEnd(e);
+        }
+
+        var foo = $WH.ac(obj);
+        mouse.x = foo[0];
+        mouse.y = foo[1];
+
+        if (obj._targets.length) {
+            dragObj = obj.cloneNode(true);
+            dragObj._orig = obj;
+
+            $WH.ae($WH.ge('layers'), dragObj);
+            // $WH.ae(document.body, dragObj); // 5.0.. why does it do that?
+            setPosition(-2323, -2323);
+        }
+        else {
+            dragObj = obj;
+        }
+
+        $WH.Tooltip.disabled = true;
+        $WH.Tooltip.hide();
+
+        if (obj.onDrag) {
+            obj.onDrag(e, dragObj, obj);
+        }
+
+        dragObj._bounds = getBounds(obj._container);
+        dragObj.className += ' dragged';
+    }
+
+    function onDragEnd(e) {
+        var
+            found = false,
+            cursor = $WH.g_getCursorPos(e);
+
+        if (dragObj._orig && dragObj._orig._targets.length) {
+            clearPosition();
+
+            var pos = {
+                x1: dragObj._x,
+                x2: dragObj._x + parseInt(dragObj.offsetWidth),
+                y1: dragObj._y,
+                y2: dragObj._y + parseInt(dragObj.offsetHeight)
+            };
+
+            $WH.de(dragObj);
+            dragObj = dragObj._orig;
+
+            for (var i = 0, len = dragObj._targets.length; i < len; ++i) {
+                var targObj = dragObj._targets[i],
+                bounds = getBounds(targObj);
+
+                if (pos.x2 >= bounds.x1 && pos.x1 < bounds.x2 && pos.y2 >= bounds.y1 && pos.y1 < bounds.y2) {
+                    found = true;
+                    if (dragObj.onDrop) {
+                        dragObj.onDrop(e, dragObj, targObj, (cursor.x >= bounds.x1 && cursor.x <= bounds.x2 && cursor.y >= bounds.y1 && cursor.y <= bounds.y2));
+                    }
+                    else {
+                        $WH.ae(targObj, dragObj);
+                    }
+                }
+            }
+        }
+
+        if (!found && dragObj.onDrop) {
+            dragObj.onDrop(e, dragObj, null);
+        }
+
+        $WH.dE(document, 'mousemove', onMouseMove);
+        $WH.dE(document, 'mouseup', onMouseUp);
+
+        $WH.Tooltip.disabled = false;
+
+        dragObj.className = dragObj.className.replace(/dragged/, '');
+        dragObj = null;
+    }
+
+    function setPosition(dX, dY) {
+        dragObj.style.position = 'absolute';
+        dragObj.style.left = mouse.x + dX + 'px';
+        dragObj.style.top = mouse.y + dY + 'px';
+
+        dragObj._x = mouse.x + dX;
+        dragObj._y = mouse.y + dY;
+    }
+
+    function clearPosition() {
+        dragObj.style.left = '-2323px';
+        dragObj.style.top = '-2323px';
+    }
+
+    function getBounds(obj) {
+        var pos = $WH.ac(obj);
+
+        return {
+            x1: pos[0],
+            x2: pos[0] + parseInt(obj.offsetWidth),
+            y1: pos[1],
+            y2: pos[1] + parseInt(obj.offsetHeight)
+        };
+    }
+
+    this.init = function (obj, opt) {
+        obj.onmousedown = onMouseDown;
+
+        var a = obj.getElementsByTagName('a');
+        for (var i = 0, len = a.length; i < len; ++i) {
+            $WH.ns(a[i]);
+        }
+
+        if (!obj._targets) {
+            obj._targets = [];
+        }
+
+        if (!obj._container) {
+            obj._container = document.body;
+        }
+
+        if (opt != null) {
+            if (opt.targets) {
+                for (var i = 0, len = opt.targets.length; i < len; ++i) {
+                    obj._targets.push($WH.ge(opt.targets[i]));
+                }
+            }
+
+            if (opt.container) {
+                obj._container = $WH.ge(opt.container);
+            }
+
+            // Functions
+            if (opt.onClick) {
+                obj.onClick = opt.onClick;
+            }
+
+            if (opt.onDrop) {
+                obj.onDrop = opt.onDrop;
+            }
+
+            if (opt.onDrag) {
+                obj.onDrag = opt.onDrag;
+            }
+        }
+    }
+};