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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。