0

I have two divs, the parent is smaller then it's child. I want to have the child's drag limit to the border of the container. However, this does not seem to work with the usual containment object. How could I do this properly?

Example: http://jsfiddle.net/Lr0s3tj7/

<div class='wrap'> <!-- smaller then child -->
    <div class='inner'> <!-- larger then parent -->

    </div>
</div>
Enzio
  • 377
  • 4
  • 15

1 Answers1

1

use array to define the border should do the trick 

 $(".inner").draggable({ 
    axis: 'x', 
    containment: [-100, 0, 0, 200 ],
    revert: true
});

http://jsfiddle.net/js09nbj1/

edited the answer to meet the requirement

Eric So
  • 465
  • 2
  • 14
  • I don't want it to ever show the background of wrap. It must always stay within the wrap. I've tried using negative values, but it makes the div snap. – Enzio Aug 20 '15 at 00:22
  • I'm not sure it is what you want. Maybe change the containment array value to this containment: [-100, 0, 0, 200 ] ? [link](http://jsfiddle.net/js09nbj1/) – Eric So Aug 20 '15 at 00:27
  • Well, that worked. I'm not sure what I was missing but it works fine now. Thanks! – Enzio Aug 20 '15 at 00:33