jQuery UI Draggable jumps at the first drag

Question

Please refer to this jsFiddle example.

At the first time dragging the draggable, it jumps out of viewable area. Yet it is still draggable. It just doesn't stick to mouse cursor.

The following code is the main JS code I use.

$('.sortable').sortable({
    revert: true
});

$('.draggable').draggable({
    connectToSortable : '.sortable',
    revert            : 'invalid'
});