jQuery draggable是一个流行的库，它允许用户通过鼠标拖动来移动元素。在这篇文章中，我们将深入研究jQuery draggable的源代码。

(function( $ ) {
$.fn.draggable = function() {
var $this = this;
$this.on('mousedown', function(event) {
var $target = $(event.target);
var offsetX = event.clientX - $target.offset().left;
var offsetY = event.clientY - $target.offset().top;
$this.on('mousemove', function(event) {
$target.css({
'left': event.clientX - offsetX,
'top': event.clientY - offsetY
});
});
$this.on('mouseup', function() {
$this.off('mousemove');
});
});
return this;
};
})( jQuery );

这段代码定义了一个jQuery插件，并将其添加到jQuery命名空间中。

在函数内部，我们首先缓存了这个jQuery对象（即元素）。

然后，我们使用jQuery的.on()方法，当元素被鼠标按下时，注册mousedown事件的回调函数。在这个回调函数中，我们获取鼠标按下的元素，并计算了该元素与鼠标指针之间的偏移量。偏移量是为了保持鼠标在元素上时，元素的位置不会跳动。

接下来，我们又用了.on()方法，注册了mousemove事件的回调函数。在这个回调函数中，我们通过改变元素的CSS属性left和top来实现元素拖动的效果。

最后，我们使用另一个.on()方法注册mouseup事件的回调函数，在鼠标指针松开时停止元素的拖动。

最终，我们将整个dragable对象返回给调用者，以便可以在其他地方使用它。