Getting jQuery sortable items in custom metabox

4 Views

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.

Read More

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>
Post Views: 4

Related posts

Leave a Reply

1 comment

  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() 
{
    add_meta_box(
        'my_sortable',
        __( 'My Sortable' ),
        'sortable_wpse_66122',
        'post'
    );
}

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">
        jQuery(document).ready(function($) 
        {    
            $( '.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) {
                        return;
                    }
                }
            });
            $( '.sortable' ).disableSelection();
        });
        </script>
    <?php
}