Default behaviour.

$('#drag1').udraggable();

Constrain drag to within parent element.

$('#drag2').udraggable({
    containment: 'parent'
});

Constrain drag to a specified rectangular area.

$('#drag3').udraggable({
    containment: [ 40, 40, 180, 170]
});

Note: the coordinates constrain the possible positions of the top left corner of the draggable element

Constrain position of dragged item to a 30px by 30px grid.

$('#drag4').udraggable({
    containment: [ 0, 0, 270, 210],
    grid:        [ 30, 30 ]
});

Apply draggable behaviour to multiple elements at one time. Red elements can only be dragged on the "y" axis (up and down). Green elements can only be dragged on the "x" axis (left and right).

$('.blk-red').udraggable({
    containment: 'parent',
    axis:        'y'
});

$('.blk-green').udraggable({
    containment: 'parent',
    axis:        'x'
});

Constrain drag to a rectangular area larger than the containing element. The parent element uses the "overflow: hidden" style to apply a clipping region.

$('#map').udraggable({
    containment: [ -960, -395, 0, 0]
});

It is of course possible to drag an element that contains draggable elements.

$('#drag11').udraggable({
    containment: 'parent'
});

$('.sub-drag').udraggable({
    containment: 'parent'
});

The 'start', 'stop' and 'drag' options allow you to monitor the progress of a drag through callback functions. The item being dragged will also have the "udraggable-dragging" class applied to it automatically - you can use CSS to take advantage of this.

This example also sets the distance threshold. The drag operation will not start until the pointer has been moved at least 15px after the initial touchstart / mousedown.

$('#drag14').udraggable({
    distance: 15,
    containment: 'parent',
    start: function () {
      $('#stat-mode').text('Dragging');
    },
    stop: function () {
      $('#stat-mode').text('Idle');
    },
    drag: function (e, ui) {
      var pos = ui.position
      $('#stat-x').text(pos.left);
      $('#stat-y').text(pos.top);
    }
});

You can override the positionElement function used to adjust the position of the dragged element. This example uses CSS transforms rather than the default left, top.

$('#drag15').udraggable({
    containment: 'parent',
    positionElement: function ($el, dragging, x, y) {
        if (dragging) {
            $el.css({
                left: 'auto',
                top: 'auto',
                transform: 'translate(' + x + 'px,' + y + 'px)'
            });
        }
        else {
            $el.css({
                left: x,
                top: y,
                transform: 'none'
            });
        }
    }
});

This example defines a drag handle. Although the whole panel can be dragged, you can only drag it by the blue title bar.

$('#dialog').udraggable({
    containment: 'parent',
    handle:      'h1'
});

The handle selector can reference multiple 'drag handle' elements. In this somewhat silly example the dice can be dragged but only by the dots.

$('.dice').udraggable({
    containment: 'parent',
    handle:      '.dot'
});