jquery draggable: jak ograniczyć obszar draggable?

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

Tego kodu nie wyświetla. Pełny kod i Demo: http://www.limitsizbilgi.com/div-tasima-surukle-birak-div-drag-and-drop-jquery.html

W celu ograniczenia elementu wewnątrz jego rodzica:

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

Oto przykład kodu do naśladowania. # thumbnail jest rodzicem DIV dla # 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);
    },
});

Zobacz fragment oficjalnej dokumentacji dla containment opcja :

Zabezpieczenie

Default: false

Ograniczenia element lub region.
obsługa wielu typów:

• Selektor: przeciągalny element zostanie umieszczony w obwiedni pierwszego elementu znalezionego przez selektor. Jeśli żaden element nie zostanie znaleziony, żadne zabezpieczenie nie zostanie gotowi.
• Element: przeciągalny element będzie zawarty w obwiedni tego elementu.
• String : Możliwe wartości: "parent", "document", "window".
• Array : tablica definiująca obwiednię w postaci [ x1, y1, x2, y2 ].

Przykłady kodu:
Zainicjalizuj przeciąganie za pomocą opcji containment podanej:

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

Get or set the containment option, after initialization:

// 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();
});