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

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

Я включаю перетаскиваемый и сбрасываемый таким образом:

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

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

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

5 ответов


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

jQuery UI API-перетаскиваемый виджет-сдерживание

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


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

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

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

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

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

см. выдержку из официальной документации для containment опции:

локализация

по умолчанию: false

ограничивает перетаскивание в пределах указанных элемент или область.
поддерживается несколько типов:

  • селектор: перетаскиваемый элемент будет содержаться в ограничивающем поле первого найденного элемента селектор. Если элемент не найден, сдерживание не будет установлено.
  • элемент: перетаскиваемый элемент будет содержаться в ограничивающем поле этого элемента.
  • строка: возможные значения: "parent", "document", "window".
  • массив: массив, определяющий ограничивающую рамку в виде [ x1, y1, x2, y2 ].

примеры кода:
Инициализировать перетаскивать с the указано:

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

получить или установить containment опции, после инициализации:

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