Establish draggable content constraints depending on position

Question

Asking all jQuery experts!

How would I go about setting up constraints for a draggable element depending on its positioning? I have a basic example here. I thought it would be as simple as adding an option, containment.

Ideally, I want it to drag within the following box:

top: 0px
left: 0px

top: -263px
left: -272px

top: 0px
left: -272px

top: -263px
left: 0px

Is there a way to drag the element within the parameters above so you don't the extra white space? I appreciate the help!

Answer 1

You have containment miss spelled as containtment

Fix that and it should help a lot.

$('#image').draggable({
     revert: false,
     containment: '#container',
     cursor: 'move',
     stop: onAfter
});