[Updated] AJAX Sortable Adoptables on "myadopts.php" Page

[SilverDragonTears]

yea, because when someone has a lot it's hard to see what you want to drag where

[fadillzzz]

I'm not sure. The documentation doesn't explain any theming for the "sortable" interactions.
But I think you can add '.ui-sortable-placeholder' to your stylesheet and give it some properties to style it to your liking.

[SilverDragonTears]

Ok thanks! The sorting in itself is just wonderful! Thanks so much for it!

[SilverDragonTears]

hmm what do I edit to style the table? Having some issues with it and I'm not familiar with JS.

[fadillzzz]

If you want to edit the table body.
Just make a CSS rule with the selector 'tbody.ui-sortable'

[SilverDragonTears]

like this:

tbody.ui-sortable {
color: #000;
width: 100%;
}

cause that didn't work

nm... it would help if i added <tbody> to it =p

[fadillzzz]

Perhaps you should update your javascript code to this one. This will achieve what I actually wanted to make, the first javascript code I provided has a "defect" even though if you have different layout and styling the result might actually be what I expected. Nevertheless, please do try this one and see if you like it better. Otherwise, just revert back to the old javascript code.

    $(document).ready(function(){
        
        $('body').undelegate('click').delegate('p#activate_sort', 'click', function(){
            var realBg = $('table#sortable_adoptables').css('background-color');
            var submitForm = '<form name="submit_order" id="submit_order" action="" method="post"><fieldset><label for="submit">Submit Changes</label><input type="submit" id="submit" value="Submit"></fieldset></form>';
            $('table#sortable_adoptables').css('background-color', '#FFFF66').animate({ backgroundColor: realBg },  'slow' ).find('tbody').sortable({ cursor: 'pointer' });
            $(submitForm).insertAfter('p#activate_sort').hide().slideDown();
            $('p#activate_sort').attr('id', 'deactivate_sort');
        });
        
        $('body').undelegate('submit').delegate('form#submit_order', 'submit', function(event){
            event.preventDefault();
            var data = $('table#sortable_adoptables tbody').sortable('serialize');
            $.post('ajax_sort.php', data, function(result){
                $('form#submit_order').html(result).delay(5000).fadeOut('slow', function(){
                    $(this).remove();                    
                });
            });
            $('table#sortable_adoptables tbody').sortable('destroy');
            $('p#deactivate_sort').attr('id', 'activate_sort');
        });
        
    });

[SilverDragonTears]

I did it but I don't see a difference.

[fadillzzz]

You sure? that code above should preserve your table background now...instead of changing it to white

[SilverDragonTears]

Ahhh that's what it is =) Love it!