获取定制元数据中的jQuery可排序项

时间：2012-09-24 作者：Ben Racicot

我已经做到了这一点：我有一个特色图片缩略图列表，加载到我主页模板的元数据库中。

我被难住了：我想让它们可以用jQuery排序，但我对jQuery真的很陌生。当我拖动框时，它们会移动，但都是随意的，我的占位符在那里，但很小，它们不会掉落并保存位置。

谢谢

这是我的代码：

<script>
    $( \'.sortable\' ).sortable({
                placeholder: \'ui-placeholder\'
            });
        $( \'.sortable\' ).disableSelection();

    });
</script>
我如何从定制的post类中获取我的特色图像来安排：

<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>

1 个回复
SO网友:brasofilo

这是一个将jQuery封装到document.ready, 添加一个handler 至项目和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
}

结束
标签： metabox   小码农  

相关推荐

在编辑帖子或页面时，如何创建带有编辑说明的HTML内容的Metabox？

我想在屏幕中添加一个带有HTML内容的自定义元框新建和编辑帖子/页面（/wp-admin/post.php?post=POST_ID&action=edit), 这样我就可以显示一个编辑指南列表，供我的编辑遵循。我不想在许多不同的地方编辑代码来更新指令。我正在寻找一些更通用的东西，我可以在一个地方编辑。我怎样才能做到这一点？