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 '12 at 17:25
  • This is more of a jQuery/CSS question. – hereswhatidid Sep 24 '12 at 17:57
  • @Wyck this is regarding custom meta boxes within WordPress and jQuery's sortable ui for its contents... – Ben Racicot Sep 26 '13 at 0:35

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? – Soufiane S Sep 22 '20 at 16:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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