WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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 } ?>
share|improve this question
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... – BenRacicot 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();
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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