- /**
- * 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;
- }
- };
- //该片段来自于http://www.codesnippet.cn/detail/130920135846.html
来源: http://www.codesnippet.cn/detail/130920135846.html