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.


Here's my code:

    $( '.sortable' ).sortable({
                placeholder: 'ui-placeholder'
        $( '.sortable' ).disableSelection();


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

<ul class="sortable">

                 $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 } ?>
  • 1
    This will be closed, because it's not a real question (no code example) and it's not certain how this pertains to WordPress and not jQuery.
    – Wyck
    Sep 24, 2012 at 17:25
  • This is more of a jQuery/CSS question. Sep 24, 2012 at 17:57
  • @Wyck this is regarding custom meta boxes within WordPress and jQuery's sortable ui for its contents... Sep 26, 2013 at 0:35

1 Answer 1


It's a matter of wrapping the jQuery into document.ready, add a handler to the items and configure the sortable:

add_action( 'add_meta_boxes', 'metabox_wpse_66122' );

function metabox_wpse_66122() 
        __( 'My Sortable' ),

function sortable_wpse_66122() 
    echo '<ul class="sortable  ui-sortable">';
    $posts = get_posts( array(
       'post_type'   => 'post',
       'post_status' => 'publish',
       'posts_per_page' => 5
    foreach( $posts as $p )
       echo "<li><code class='hndle'> -[]- </code> {$p->post_title}</li>";
    echo '</ul>';
        <script type="text/javascript">
            $( '.sortable' ).sortable({
                opacity: 0.6,
                revert: true,
                cursor: 'move',
                handle: '.hndle',
                placeholder: {
                    element: function(currentItem) {
                        return $("<li style='background:#E7E8AD'>&nbsp;</li>")[0];
                    update: function(container, p) {
            $( '.sortable' ).disableSelection();
  • After sorting the elements the metabox closes, any solution? Sep 22, 2020 at 16:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.