view/js/draggable.js


// Copyright (c) 2009 Katsuhisa Yuasa <berupon [at] gmail.com>
// License http://www.opensource.org/licenses/mit-license.html

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 elems = null;
        
        function endDrag() {
                dragging = false;
                clickedElement = null;
                dragElement = null;
        }
        
        function getDragTarget(elem) {
                var attr = elem.attributes.getNamedItem("dragtarget");
                var ret = null;
                if (attr) {
                        ret = $(attr.value);
                        if (!ret) {
                                alert("Draggable dragtarget not found!");
                                return;
                        }
                }else {
                        ret = clickedElement;
                }
                return ret;
        }
        
        var onMouseDownHandler = function(e) {
                clickedElement = Event.element(e);
                dragElement = getDragTarget(clickedElement);
                dragging = true;
                dragStartMousePos = Event.pointer(e);
                dragElementStartPos = [NaN0(parseInt(dragElement.style.left)), NaN0(parseInt(dragElement.style.top))];
                
                var maxZIndex = 0;
                for (var i=0; i<elems.length; ++i) {
                        var elem = getDragTarget(elems[i]);
                        maxZIndex = Math.max(elem.style.zIndex, maxZIndex);
                }
                dragElement.style.zIndex = maxZIndex + 1;
                Event.stop(e);
        };
        
        this.attach = function(){
                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(){
                endDrag();
        });
        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(){
                endDrag();
        });
        
        
};

