Utiliser la méta-boîte glisser-déposer pour commander les éléments indépendamment

4

J'utilise une méta-boîte pour chaque image d'un type d'article personnalisé, et j'aimerais utiliser la fonctionnalité de glisser-déposer pour permettre au client de les réorganiser facilement. Le problème est lorsqu'un article personnalisé est réorganisé, les autres sont également commandés à nouveau ... Est-il possible que chaque message ait sa propre commande?

Où est l’ordre des boîtes de méta sauvegardé?

Existe-t-il des filtres que je pourrais utiliser pour modifier le comportement d'un type de message particulier?

Merci beaucoup d'avance! Gioia

    
posée Gioia Fueter 20.05.2014 - 09:20

1 réponse

5

Comme suggéré par sri, je vais répondre à ma propre question:)

Le glisser-déposer des méta-boîtes sert à rappeler l'ordre des méta-boîtes pour chaque utilisateur. Par conséquent, si l'utilisateur A souhaite avoir la méta-boîte 5 en haut parce qu'il utilise cette fonctionnalité davantage, il n'a pas à le faire. déplacez la boîte à méta à chaque fois. J'ai décidé que changer ce comportement n'était pas une bonne idée, car les utilisateurs connaissant ce comportement risquaient de se perdre. Cela signifierait également de jouer avec la base de données.

J'ai donc utilisé jquery ui sortable déjà intégré pour rendre mes champs personnalisés triables. J'ai créé un conteneur div pour la zone des champs triables, avec un identifiant "sortable", puis ajouté une table pour chaque groupe de champs (je voulais un groupe de champs triable, pas des champs individuels). Puis un tr pour chaque champ. L'un des champs personnalisés de chaque table que j'ai utilisée pour enregistrer la commande sous forme de méta-publication.

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

Bien sûr, il s’agit d’une simplification excessive, car j’utilise des tableaux pour générer les codes postfields, mais uniquement pour afficher la structure.

Puis j'ai ajouté le javascript:

Pour ajouter une valeur aux champs personnalisés de l'ordre en fonction de leur position:

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

Pour rendre les tables triables. Je devais ajouter la poignée au titre, sinon, essayer de télécharger un fichier a lancé le mode glisser:

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

Ensuite, pour mettre à jour la commande au fur et à mesure que je glisse et dépose:

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

La dernière chose à faire était de commander les tables en fonction de ma commande personnalisée. J'ai modifié le code:

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

C’est la première fois que j’essaie d’expliquer mon code, il n’est probablement pas complet du tout, alors tout ce que je peux faire pour le rendre plus clair, les suggestions sont les bienvenues;)

    
réponse donnée Gioia Fueter 18.06.2014 - 18:38

Lire d'autres questions sur les étiquettes