CODEWITHSUNDEEP
jquery-ui
Sandvich
Sandvich

Reputation: 110

jquery ui draggable constraints

I've got jQuery UI draggable div (near 10000 px width) and I want to make such constraints so the left side of draggable div won't go ahead of left side of screen and right side of div won't go off right side. I tried to show it on the picture. div on screen

It seems that rectangular constraints won't fit this case and I'm lost in that

To be more clear, here is example: http://full-demo.megaplan.ru/vacation/diagram/ There you can't go futher jan 2013 and before july 2007

Upvotes: 1

Views: 917

Answers (1)

mu is too short
mu is too short

Reputation: 434615

You could add a container between my_DIV and the draggable and set that container's width to $('html').width() to make it as wide as the screen; then position the container so that it's position matches the screen. The result would be a <div> that matches the inner rectangle on your diagram. Once that's in place you could use the normal containment option to keep the draggable on-screen.

For example:

<div class="draggable">
    <div id="container">
        <p class="ui-widget-header">Draggable</p>
    </div>
</div>

Then size and position #container and use this:

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

Demo: http://jsfiddle.net/ambiguous/SG9KS/

Upvotes: 1

Related Questions