Use el cuadro meta arrastrar y soltar para ordenar artículos de forma independiente

4

Estoy usando un meta box para cada imagen en un tipo de publicación personalizada, y me gustaría usar la funcionalidad de arrastrar y soltar para permitir que el cliente pueda reordenarlas fácilmente, el problema es cuando una publicación personalizada se reordena, las otras también se reordenan ... ¿Hay alguna forma de que cada publicación tenga su propio orden?

¿Dónde está guardado el orden de las meta cajas?

¿Hay algún filtro que pueda usar para modificar el comportamiento de un tipo de publicación en particular?

Muchas gracias de antemano! Gioia

    
pregunta Gioia Fueter 20.05.2014 - 09:20

1 respuesta

5

Según lo sugerido por Sri, responderé a mi propia pregunta :)

El arrastrar y soltar de los meta boxes es para recordar el orden de los meta box para cada usuario, por lo que si al usuario A le gusta tener meta box 5 en la parte superior porque usa esa función más, no tiene que hacerlo. Mueve la caja meta cada vez. Decidí que cambiar esa conducta no era una buena idea, ya que los usuarios que saben de esa conducta podrían confundirse. También significaría perder el tiempo con la base de datos.

Por lo tanto, en lugar de eso, utilicé el jiurí ui que ya estaba integrado para ordenar mis campos personalizados. Creé una división de contenedor para el área de campos clasificables, con un ID "ordenable", luego agregué una tabla para cada grupo de campos (quería que un grupo de campos sea clasificable, no campos individuales). Entonces un tr para cada campo. Uno de los campos personalizados en cada tabla que usé para guardar el pedido como meta de publicación.

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

Por supuesto, esto es una simplificación excesiva, ya que utilizo matrices para generar los códigos de campos posteriores, pero solo para mostrar la estructura.

Luego agregué el javascript:

Para agregar un valor a los campos personalizados del pedido según su posición:

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

Para hacer las tablas clasificables. Tuve que agregar el controlador al título, de lo contrario, al intentar cargar un archivo se inició el modo de arrastre:

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

Luego, para actualizar el orden mientras arrastro y suelto:

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

Lo último fue ordenar las tablas según mi pedido personalizado. He modificado el 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 es la primera vez que trato de explicar mi código, probablemente no sea exhaustivo, así que cualquier cosa que pueda hacer para que quede más claro, las sugerencias son bienvenidas;)

    
respondido por el Gioia Fueter 18.06.2014 - 18:38

Lea otras preguntas en las etiquetas