jquery draggable custom containment

Question

I want keep object inside parent while dragging. Sample fiddle is jsFiddle

$("#child").draggable({cursor:'move',axis: "x"});

axis is working fine but also child left and right should keep in parent. You should only drag in y axis and parent width.

Thanks

Answer 1

Use the containment option on the draggable element. Example Code :

$("#child").draggable({
    cursor:'move',
    axis: "x",
    containment: "parent"
});

Alternatively you can set this to be the ID of an element (ie containment:'#parent' )

There was a problem with your child element being constrained in your JSFiddle because it was bigger than the Parent Element. In my example fiddle below I have made the child element width:200px; so that it fits within the parent div (so it is constrained correctly).

Example JSFiddle