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; 
    } 
};