jquery draggable: how to limit the draggable area?

Question

I have a draggable object (div), and some droppable ones (table TD's). I want the user to drag my draggable object to one of those droppable TD's.

I enable draggable and droppable this way:

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

The problem is that with this the user can drag the div anywhere on the screen, including out of the droppable area.

How can I limit the boundary area for the draggable object?

score 102 · Accepted Answer · edited Mar 06 '18 at 13:12

102

Use the "containment" option:

jQuery UI API - Draggable Widget - containment

The documentation says it only accepts the values: 'parent', 'document', 'window', [x1, y1, x2, y2] but I seem to remember it will accept a selector such as '#container' too.

edited Mar 06 '18 at 13:12

naXa stands with Ukraine

35,493
19
190
259

answered Jul 13 '10 at 12:52

Mattyod

1,349
1
9
12

I did thums up friend. You saved me a lot ;) Just solved by reading first line and it's recommended value in your answer. – Smile Jan 02 '14 at 11:29
its not accepting the Selectors though. Even if I enter a selector it is dragging beyond that selector. Any other way to do this? Anyways Thumbs up! – harishannam Mar 02 '14 at 18:42
@Mattyod how to do this without a containment? – Mohammad Kermani Mar 13 '14 at 14:27
When I used containment, it doesn't let the draggable item go all the way to the edge of the object – Ethan Leyden Jul 16 '16 at 20:20

score 19 · Answer 2 · edited Apr 03 '17 at 13:13

19

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

of this code does not display. Full code and Demo: http://www.limitsizbilgi.com/div-tasima-surukle-birak-div-drag-and-drop-jquery.html

In order to limit the element inside its parent:

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

edited Apr 03 '17 at 13:13

SUB0DH

5,130
4
29
46

answered Mar 14 '13 at 20:28

Limitless isa

3,689
36
28

1

Thanks for posting your answer! Please be sure to read the [FAQ on Self-Promotion](http://stackoverflow.com/faq#promotion) carefully. Also note that it is *required* that you post a disclaimer every time you link to your own site/product. – Andrew Barber Mar 14 '13 at 21:07

score 12 · Answer 3 · answered Oct 29 '12 at 20:53

Here is a code example to follow. #thumbnail is a DIV parent of the #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);
    },
});

score 0 · Answer 4 · answered Mar 06 '18 at 13:24

See excerpt from official documentation for containment option:

containment

Default: false

Constrains dragging to within the bounds of the specified element or region.
Multiple types supported:

Selector: The draggable element will be contained to the bounding box of the first element found by the selector. If no element is found, no containment will be set.

Element: The draggable element will be contained to the bounding box of this element.

String: Possible values: "parent", "document", "window".

Array: An array defining a bounding box in the form [ x1, y1, x2, y2 ].

Code examples:
Initialize the draggable with the containment option specified:
$( ".selector" ).draggable({
    containment: "parent" 
}); 
Get or set the containment option, after initialization:
// Getter
var containment = $( ".selector" ).draggable( "option", "containment" );
// Setter
$( ".selector" ).draggable( "option", "containment", "parent" );

what about specific element ? , i don't want to add "parent", "document", "window" — Code_S, Oct 25 '19 at 07:00

score 0 · Answer 5 · edited Jul 05 '18 at 17:53

0

$(function () {
    $( ".droppable-area" ).sortable({
                connectWith: ".connected-sortable",
                containment: ".droppable-area", //(parent div)
                stack: '.connected-sortable div'
            }).disableSelection();
});

edited Jul 05 '18 at 17:53

Adam Kipnis

10,175
10
35
48

answered Jul 05 '18 at 17:31

Rahul Ratnam

1
1

jquery draggable: how to limit the draggable area?

5 Answers5

containment

Linked

Related