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

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

Я включаю draggable и droppable таким образом:

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

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

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

5 51
jquery draggable

5 ответов:

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

jQuery и API для пользовательского интерфейса - виджет можно перетаскивать по сдерживанию

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

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

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

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

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

вот пример кода для выполнения. # 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);
    },
});
9

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

локализация

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

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

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

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

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

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

// Getter
var containment = $( ".selector" ).draggable( "option", "containment" );
// Setter
$( ".selector" ).draggable( "option", "containment", "parent" );
0
$(function () {
    $( ".droppable-area" ).sortable({
                connectWith: ".connected-sortable",
                containment: ".droppable-area", //(parent div)
                stack: '.connected-sortable div'
            }).disableSelection();
});
0