56

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?

5 Answers 5

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.

4
  • 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 2, 2014 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! Mar 2, 2014 at 18:42
  • @Mattyod how to do this without a containment? Mar 13, 2014 at 14:27
  • When I used containment, it doesn't let the draggable item go all the way to the edge of the object Jul 16, 2016 at 20:20
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" });
1
  • 1
    Thanks for posting your answer! Please be sure to read the FAQ on Self-Promotion carefully. Also note that it is required that you post a disclaimer every time you link to your own site/product. Mar 14, 2013 at 21:07
12

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);
    },
});
0

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" );
1
  • what about specific element ? , i don't want to add "parent", "document", "window"
    – Code_S
    Oct 25, 2019 at 7:00
0
$(function () {
    $( ".droppable-area" ).sortable({
                connectWith: ".connected-sortable",
                containment: ".droppable-area", //(parent div)
                stack: '.connected-sortable div'
            }).disableSelection();
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.