Use arrastar e soltar caixa meta para ordenar itens independentemente

4

Estou usando uma meta box para cada imagem em um tipo de postagem personalizada e gostaria de usar a funcionalidade arrastar e soltar para permitir que o cliente as reorganize facilmente. O problema é quando uma postagem personalizada é reordenada, as outras são reordenados também ... Existe alguma maneira que cada post tenha seu próprio pedido?

Onde a ordem das caixas meta é salva?

Há algum filtro que eu possa usar para modificar o comportamento de um determinado tipo de postagem?

Muito obrigado antecipadamente! Gioia

    
por Gioia Fueter 20.05.2014 / 09:20

1 resposta

5

Como sugerido por sri, responderei minha própria pergunta:)

O arrastar e soltar das caixas meta é para lembrar a ordem das caixas meta para cada usuário, portanto, se o usuário A preferir ter a meta box 5 no topo, porque ele usa esse recurso mais, ele não precisa fazer Mova a caixa meta todas as vezes. Decidi que mudar esse comportamento não era uma boa ideia, já que os usuários que sabem desse comportamento podem ficar confusos. Também significaria mexer com o banco de dados.

Por isso, usei o já construído em jquery ui, que pode ordenar meus campos personalizados. Eu criei um div contêiner para a área de campos classificáveis, com um id "classificável", em seguida, adicionei uma tabela para cada grupo de campos (eu queria que um grupo de campos fosse classificável, não campos individuais). Então um tr para cada campo. Um dos campos personalizados em cada tabela que usei para salvar o pedido como uma postagem 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>

É claro que isso é uma simplificação excessiva, já que uso arrays para gerar códigos de campos, mas apenas para mostrar a estrutura.

Então eu adicionei o javascript:

Para adicionar um valor aos campos personalizados do pedido com base em sua posição:

$("#sortable > table").each(function(index) {
    console.log(index+1);
    var count = index+1;
    $(this).find(".ordering").val(count);
}) 

Para tornar as tabelas classificáveis. Eu tive que adicionar o identificador para o título, caso contrário, tentando fazer upload de um arquivo iniciado o modo de arrastar:

$("#sortable").sortable({ 
    cursor: "move", 
    containment: "parent",
    cursorAt: { left: -5,top:-5 },
    distance: 10,
    handle:"th.title"
});

Em seguida, atualize o pedido conforme eu arrasto e solto:

$('#sortable').on("sortstop", function( event, ui ) {
    $("#sortable > table").each(function(index) {
        console.log(index+1);
        var count = index+1;
        $(this).find(".ordering").val(count);
    }) 
} );

A última coisa foi encomendar as tabelas com base no meu pedido personalizado. Eu modifiquei o código:

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

Esta é minha primeira vez tentando explicar meu código, provavelmente não é abrangente, então qualquer coisa que eu possa fazer para deixar isso mais claro, sugestões são bem-vindas;)

    
por Gioia Fueter 18.06.2014 / 18:38

Tags