jquery draggable: ¿cómo limitar el área arrastrable?

$(function() { $( "#draggable" ).draggable({ containment: "window" }); });

De este código no se muestra. Código completo y Demo: http://www.limitsizbilgi.com/div-tasima-surukle-birak-div-drag-and-drop-jquery.html

Para limitar el elemento dentro de su padre:

$( "#draggable" ).draggable({ containment: "window" });

Aquí hay un ejemplo de código a seguir. # thumbnail es un padre DIV del # handle DIV

buildDraggable = function() {
    $( "#handle" ).draggable({
    containment: '#thumbnail',
    drag: function(event) {
        var top = $(this).position().top;
        var left = $(this).position().left;

        ICZoom.panImage(top, left);
    },
});

Véase extracto de la documentación oficial para containment opción :

Contención

Predeterminado: false

Restringe el arrastre dentro de los límites de lo especificado elemento o región.
Múltiples tipos soportados:

• Selector : El elemento arrastrable estará contenido en el cuadro delimitador del primer elemento encontrado por el selector. Si no se encuentra ningún elemento, no se establecer.
• Elemento : El elemento arrastrable estará contenido en el cuadro delimitador de este elemento.
• Cadena : Valores posibles: "parent", "document", "window".
• Array: Un array que define un cuadro delimitador en la forma [ x1, y1, x2, y2 ].

Ejemplos de Código:
Inicialice el arrastrable con la opción containment especificada:

$( ".selector" ).draggable({
    containment: "parent" 
}); 

Obtener o establecer la opción containment, después de la inicialización:

// Getter
var containment = $( ".selector" ).draggable( "option", "containment" );
// Setter
$( ".selector" ).draggable( "option", "containment", "parent" );

$(function () {
    $( ".droppable-area" ).sortable({
                connectWith: ".connected-sortable",
                containment: ".droppable-area", //(parent div)
                stack: '.connected-sortable div'
            }).disableSelection();
});