Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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>
share|improve this question
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... –  BenRacicot Sep 26 '13 at 0:35
add comment

1 Answer

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
}
share|improve this answer
add comment

Your Answer

 
discard

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.