Question

I’m trying to create a tile grid that can be rearranged. The tiles are of different sizes. Here’s how far I’ve gotten.

http://jsfiddle.net/psivadasan/dMtRs/

How do I prevent tiles from being rearranged outside the grey area? I don’t want this to happen:
https://i.stack.imgur.com/TYB0V.png

Appreciate any help.

Answer 1

Just use the containment option: This will stop the elements being dragged outside.

$('ul').sortable( "option", "containment", 'parent' );

http://jsfiddle.net/dazefs/dMtRs/7/