Question

I’m creating a web application where I need to do some design tweaks. Here is the sample feature code: http://jsfiddle.net/rkumarnirmal/FSDPH/

The black movable box shown there should not be moved out of the page(not even a bit), but if you check there, You can move the box and place it somewhat out of the page. How can I control it?

One more thing, I’m going to implement jPicker tool http://www.digitalmagicpro.com/jPicker/ in that box. If we click the color box, the jPicker tool will be popped out and then if the box is moved the jPicker tool must have to arranged itself according to the page.

I know asking question like this is not fair, but I have no chance 🙁 Could anyone guide me?

Thanks!

Answer 1

You can use the containment property on draggable to keep the draggable element inside one of its parents.

For example:

$("#box_bg").draggable({scroll: false, cancel: "div#box", containment: 'document'});