it-swarm.com.ru

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

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

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

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

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

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

53
xus

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

API jQuery UI - Draggable Widget - сдерживание

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

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

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

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

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

Вот пример кода для подражания. #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
mbokil
$(function () {
    $( ".droppable-area" ).sortable({
                connectWith: ".connected-sortable",
                containment: ".droppable-area", //(parent div)
                stack: '.connected-sortable div'
            }).disableSelection();
});
0
Rahul Ratnam

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

политика сдерживания

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

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

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

Примеры кода:
Инициализируйте перетаскиваемый объект с указанным параметром containment:

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

Получите или установите параметр containment после инициализации:

// Getter
var containment = $( ".selector" ).draggable( "option", "containment" );
// Setter
$( ".selector" ).draggable( "option", "containment", "parent" );
0
naXa