Jquery draggable: как ограничить область перетаскивания?

У меня есть перетаскиваемый объект (div) и некоторые droppable (таблица TD). Я хочу, чтобы пользователь перетащил мой перетаскиваемый объект в один из этих droppable TD's.

Я разрешаю draggable и droppable следующим образом:

$(".draggable").draggable();
$(".droppable").droppable();

Проблема заключается в том, что при этом пользователь может перетащить div в любом месте экрана, в том числе из области сбрасываемой области.

Как я могу ограничить граничную область для объекта перетаскивания?

Ответ 1

Используйте опцию "сдерживание":

http://docs.jquery.com/UI/Draggable#option-containment

В документации говорится, что он принимает только значения: "родитель", "документ", "окно", [x1, y1, x2, y2], но я, кажется, помню, что он примет селектор, например "#container".

Ответ 2

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

этого кода не отображается. Полный код и демоверсия: http://www.limitsizbilgi.com/div-tasima-surukle-birak-div-drag-and-drop-jquery.html

Чтобы ограничить элемент внутри его родителя:

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

Ответ 3

Ниже приведен пример кода. #thumbnail - родитель DIV #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);
    },
});