按照sri的建议,我将回答我自己的问题:)
元框的拖放是为了记住每个用户元框的顺序,因此如果用户A喜欢将元框5放在顶部,因为他更多地使用该功能,他不必每次都移动元框。我认为改变这种行为不是一个好主意,因为知道这种行为的用户可能会感到困惑。也意味着要搞乱数据库。
因此,我改为使用已经内置的jquery ui可排序,以使自定义字段可排序。我为可排序字段区域创建了一个id为“sortable”的容器div,然后为每个字段组添加了一个表(我希望一组字段是可排序的,而不是单个字段)。然后是每个字段的tr。每个表中的一个自定义字段用于将订单另存为post meta。
<div id="sortable">
<table>
<tr><th class="title">My title</td></tr>
<tr><td>Code postfield 1 - 1</td></tr>
<tr><td>Code postfield 1 - 2</td></tr>
<tr><td><input name="ordering_1" type="hidden" class="ordering" value="$meta"></td></tr>
</table>
<table>
<tr><th class="title">My title</td></tr>
<tr><td>Code postfield 2 -1 </td></tr>
<tr><td>Code postfield 2 -2</td></tr>
<tr><td><input name="ordering_2" type="hidden" class="ordering" value="$meta"></td></tr>
</table>
</div>
当然,这过于简化了,因为我使用数组生成postfields代码,但只是为了显示结构。
然后我添加了javascript:
要根据订单自定义字段的位置向其添加值,请执行以下操作:
$("#sortable > table").each(function(index) {
console.log(index+1);
var count = index+1;
$(this).find(".ordering").val(count);
})
使表格可排序。我必须将句柄添加到标题,否则,尝试上载文件时会启动拖动模式:
$("#sortable").sortable({
cursor: "move",
containment: "parent",
cursorAt: { left: -5,top:-5 },
distance: 10,
handle:"th.title"
});
然后在拖放时更新顺序:
$(\'#sortable\').on("sortstop", function( event, ui ) {
$("#sortable > table").each(function(index) {
console.log(index+1);
var count = index+1;
$(this).find(".ordering").val(count);
})
} );
最后一件事是根据我的定制订单来订购表格。我修改了代码:
<div id="sortable" style="float:left">
<? $field_groups = array();
if (get_post_meta($post->ID,"order_eng_1_1",true)) {
for ($i = 1; $i <= 20; $i++){
$field_groups[get_post_meta($post->ID,"order_eng_".$i."_1",true)] = $i;
}
ksort($field_groups);
foreach ($field_groups as $field_order => $field_id) {?>
<table class="form-table dropable">
<tr>
<th class="title">My Title <?= $field_order?></th>
</tr>
<tr><td>Code postfield 1 - 1</td></tr>
<tr><td>Code postfield 1 - 2</td></tr>
<tr><td><input name="ordering_1" type="hidden" class="ordering" value="$meta"></td></tr>
</table>
<? }
} else {
for ($i = 1; $i <= 20; $i++) {?>
<table class="form-table dropable">
<tr><th class="title">My title <?=$i?></th></tr>
<tr><td>Code postfield 1 - 1</td></tr>
<tr><td>Code postfield 1 - 2</td></tr>
<tr><td><input name="ordering_2" type="hidden" class="ordering" value="$meta"></td></tr>
</table>
<? }
}?>
</div>
这是我第一次尝试解释我的代码,它可能一点也不全面,所以我可以做任何事情来让它更清楚,建议是非常受欢迎的;)