Getting jQuery sortable items in custom metabox

Question

I've gottent this far: I have a list of featured image thumbnails loading into a metabox on my home-page template.

I'm stumped: I'm looking to make them sortable with jQuery but I'm really new to jQuery. The boxes move when I drag them but all haphazard, my placeholder is there but very small and they won't drop and save position.

Thanks!

Here's my code:

<script>
    $( '.sortable' ).sortable({
                placeholder: 'ui-placeholder'
            });
        $( '.sortable' ).disableSelection();

    });
</script>

How I'm getting my featured images from a custom post class to arrange:

<ul class="sortable">
            <?PHP 

                 $posts = get_posts(array(
                    'post_type'   => 'slidertype',
                    'post_status' => 'publish',
                    'posts_per_page' => -1,
                    'fields' => 'ids'
                    )
                );

                //loop over each post
                foreach($posts as $p){

                    $thumb =    get_post_meta($p,"_thumbnail_id",true);
                    $image = wp_get_attachment_image_src($thumb);

            ?>  <li><img src="<?PHP echo $image[0]; ?>" /> </li> <?PHP } ?>
        </ul>