我已经做到了这一点：我有一个特色图片缩略图列表，加载到我主页模板的元数据库中。
我被难住了：我想让它们可以用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>
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\'> </li>")[0];
},
update: function(container, p) {
return;
}
}
});
$( \'.sortable\' ).disableSelection();
});
</script>
<?php
}
