JS簡單的拖動類

draggable class. 實現簡單的拖動功能。

/**


Make any html element draggable.
*
@constructor
@param {Object} element Any html element
@param {Object} [options] Available options
@config {String} [axis] Forces element to move only vertically or horizontally.
Possible values: 'x' for horizontal movement, 'y' for vertical movement. Example { 'axis': 'x' }.
/
function Draggable(element, options){
 this.el = element;
 this.o = options;
 this.el.position = { x: parseInt($(element).css('left')), y: parseInt($(element).css('top')) };
 this._canMove = false;
 this._init();
}

Draggable.prototype = {
    _offset: { x: 0, y: 0 },
    _init: function(){
        $(this.el).bind('mousedown', $.proxy(this._mousedown, this));
        $(document).bind('mousemove', $.proxy(this._mousemove, this));
        $(document).bind('mouseup', $.proxy(this._mouseup, this));
    },
    _mousedown: function(e){
        e.preventDefault();
        this._canMove = true;
        this._offset.x = $(this.el).offset().left - e.pageX;
        this._offset.y = $(this.el).offset().top - e.pageY;
    },
    _mousemove: function(e){
        if(this._canMove){
            var x = this.o.axis === 'y' ? this.el.position.x : this._offset.x + e.pageX;
            var y = this.o.axis === 'x' ? this.el.position.y : this._offset.y + e.pageY;
            $(this.el).css({'left': x, 'top': y});
        }
    },
    _mouseup: function(){
        this._canMove = false;
    }
};</pre>