封装jquery拖拽chajian

(function($) { $.fn.draggable = function(options) { var defaults = { onStart: function() {}, onDrag: function() {}, onEnd: function() {}, containment: 'parent' }; var settings = $.extend({}, defaults, options); return this.each(function() { var isDragging = false; var $self = $(this); var startX, startY, offsetX, offsetY; $self.css('position', 'absolute'); $self.on('mousedown', function(e) { isDragging = true; startX = e.pageX; startY = e.pageY; offsetX = $self.offset().left - startX; offsetY = $self.offset().top - startY; settings.onStart.call($self, e); }); $(document).on('mousemove', function(e) { if (isDragging) { var left = e.pageX + offsetX; var top = e.pageY + offsetY; if (settings.containment === 'parent') { var parent = $self.parent(); left = Math.min(Math.max(left, 0), parent.width() - $self.outerWidth()); top = Math.min(Math.max(top, 0), parent.height() - $self.outerHeight()); } $self.css({ left: left, top: top }); settings.onDrag.call($self, e); } }); $(document).on('mouseup', function(e) { if (isDragging) { isDragging = false; settings.onEnd.call($self, e); } }); }); }; })(jQuery);