Jquery draggable inside-out containment

Question

instead of having the containment of the draggable element around it, how can I have it inside it? So you can drag the element anywhere as long as the edges of it do not collide with the element inside of it?

Answer 1

You could fake it by making a real containing component that restricts your draggable element as if it is constrained by the smaller element. You would just have to make the dimensions of the real container like this:

Container.height = (Draggable.height - Restrict.height) + Draggable.height
Container.width = (Draggable.width - Restrict.width) + Draggable.width

Then, you would also need to counter the dragging motion so that the contained restriction element doesn't seem to move when the draggable element moves. Either that or the immobile section could be a floating div.

Answer 2

One approach is to use the drag event and update the ui.position or ui.offset fields, to manually constrain the item.

Here is a jsfiddle to illustrate the concept, although this doesn't fully implement what you describe.

Answer 3

如果对此感兴趣，请使用Rusty的代码和逻辑， 这是JSfiddle链接 。

Answer 4

Building upon @RustyTheBoyRobot's answer you could also accomplish in CSS alone if you have known dimensions of your draggable.

Live Example - jsbin.com/agovex

The obvious downside of this is if you want to reuse this in multiple situations it's not going to work because the values are hardcoded in CSS. But if you only need it for one thing with known dimensions I find the CSS only approach simple and elegant. There's only one line of JavaScript to create the draggable.