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