封装jquery拖拽chajian
257
2024-03-11 03:06
(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);
顶一下
(0)
踩一下
(0)