view/js/draggable.js


var Draggable = function() {
        var NaN0 = function (v){
                return isNaN(v) ? 0 : v;
        };
        var dragging = false;
        var dragStartMousePos = null;
        var dragElementStartPos = null;
        
        var clickedElement = null;
        var dragElement = null;
        
        var onMouseDownHandler = function(e) {
                dragging = true;
                clickedElement = Event.element(e);
                var attr = clickedElement.attributes.getNamedItem("dragtarget");
                if (attr) {
                        dragElement = $(attr.value);
                        if (!dragElement) {
                                alert("Draggable dragtarget not found!");
                        }
                }else {
                        dragElement = clickedElement;
                }
                dragStartMousePos = Event.pointer(e);
                dragElementStartPos = [NaN0(parseInt(dragElement.style.left)), NaN0(parseInt(dragElement.style.top))];
                Event.stop(e);
        };
        
        this.attach = function(){
                var elems = getElementsByClassName('draggable');
                for (var i=0; i<elems.length; ++i) {
                        var elem = elems[i];
                        Event.observe(elem, 'mousedown', onMouseDownHandler);
                }
        };
        Event.observe(window, 'load', this.attach);
        
        Event.observe(document, 'mouseup', function(){
                dragging = false;
                clickedElement = null;
                dragElement = null;
        });
        Event.observe(document, 'mousemove', function(e){
                if (!dragging) {
                        return;
                }
                var curMousePos = Event.pointer(e);
                if (curMousePos.x < 0 || curMousePos.y < 0) {
                        return;
                }
                var diffMousePos = [curMousePos.x-dragStartMousePos.x, curMousePos.y-dragStartMousePos.y];
                dragElement.style.left = dragElementStartPos[0] + diffMousePos[0] + "px";
                dragElement.style.top = dragElementStartPos[1] + diffMousePos[1] + "px";
        });
        Event.observe(document, 'blur', function(){
                dragging = false;
        });
        
        
};

