Sorting Columns of Adoptables

[fadillzzz]

You can add a callback to the receive event and prevent users from putting more than 2 items into the same area. But this might prevent them from sorting if there's no empty space. And if they only have one empty space, it'll probably be a little bit painful to reorder the adoptables

$('.sortable_adoptables')
                    .css('background-color', '#FFFF66')
                    .animate({ backgroundColor: realBg },  'slow' )
                    .sortable({ 
                        cursor: 'pointer', connectWith: ".sortable_adoptables", receive: function(event, ui) {
                            var $this = $(this);
                            if ($this.children('table').length > 1) {
                                $(ui.sender).sortable('cancel');
                            }
                        }
                    });

[!Alive]

I tried using that and it made so that the adoptables wouldn't change positions. They can be dragged but when I drop it it snaps back to where it was.
Is there a way to push them horizontally instead of vertically, wrapping through the table. So like if I grab the first adoptable and drag it over one space the second adoptable moves to the first spot.