Como salvar o estado de um arrastar e soltar Editor de layout de front end do jQuery UI Sortables?

19

Estou criando um editor de layout de postagem front-end usando jQuery UI Sortable .

As postagens são exibidas em caixas de 300 x 250 pixels em uma imagem de plano de fundo. As postagens são criadas e editadas usando a administração do WordPress, mas eu quero permitir que o administrador do site ajuste a ordem das caixas usando uma interface de arrastar e soltar no front end.

Eu tenho o arrastar e soltar parte ordenável trabalhando, mas precisa chegar a uma maneira de salvar o estado (ordem) das caixas. Idealmente, gostaria de poder salvar o estado como uma opção e compilá-lo na consulta.

A consulta das postagens é uma simples WP_Query que também obtém dados de caixas meta personalizadas para determinar o layout da caixa individual.:

$args= array(
      'meta_key' => 'c3m_shown_on',
       'meta_value'=> 'home' );
    $box_query = new WP_Query($args);  ?>
        <ul id="sortable">
            <?php
    while ($box_query->have_posts()) : $box_query->the_post(); global $post; global $prefix;           
    $box_size = c3m_get_field($prefix.'box_size', FALSE);
    $box_image = c3m_get_field($prefix.'post_box_image', FALSE);
    $overlay_class = c3m_get_field($prefix.'overlay_class', FALSE);

    if ( c3m_get_field($prefix.'external_link', FALSE) ) {
    $post_link = c3m_get_field($prefix.'external_link', FALSE);
    } else
            { $post_link = post_permalink(); 
    } ?>     
     <li class="<?php echo $box_size;?>  ui-state-default">
        <article <?php post_class() ?> id="post-<?php the_ID(); ?>">
            <?php echo  '<a href="'.$post_link.'" ><img src="'.esc_url($box_image).'" alt="Image via xxxxx.com" /></a>'; ?>
                <div class="post-box <?php echo $overlay_class;?>">
                <?php if ( c3m_get_field( $prefix.'text_display', FALSE) ) { ?>     
                <h2><a href="<?php echo $post_link?>"><?php the_title();?></a></h2> 
                <p><?php echo substr($post->post_excerpt, 0, 90) . '...'; ?></p>            
                <?php } ?>               
                </div>
         </article>
     </li>              
    <?php endwhile; ?>
       </ul>
</section>

O javascript é apenas as instruções padrão de classificação padrão

jQuery(document).ready(function() {
    jQuery("#sortable").sortable();
  });

Existem métodos disponíveis usando cookies para salvar o estado, mas também preciso desativar o arrastar e soltar classificável para não usuários admin, então eu realmente preciso salvar no banco de dados.

Estou à procura do método mais criativo e utilizável e atribuirei uma recompensa de 100 pontos à melhor resposta.

Atualização:

Eu obtive a resposta somatic trabalhando com uma pequena alteração.

ajaxurl não retorna o valor em páginas não administrativas, então usei wp_localize_script( 'functions', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); para definir o valor e alterei a linha javascript em opções para:% url: MyAjax.ajaxurl,

Para limitar o acesso a organizar o pedido apenas para administradores, adicionei uma condição à minha função wp_enqueue_script:

    function c3m_load_scripts() { 
    if ( current_user_can( 'edit_posts' ) ) {
        wp_enqueue_script( 'jquery-ui' );
        wp_enqueue_script( 'functions', get_bloginfo( 'stylesheet_directory' ) . '/_/js/functions.js', array( 'jquery', 'jquery-ui' ), false);
        wp_localize_script( 'functions', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
    }
}

Vou fazer um pouco mais de testes e marcar essa pergunta como resolvida e recompensar a recompensa.

    
por Chris_O 04.05.2011 / 16:12

2 respostas

21

Brady está certo de que a melhor maneira de gerenciar salvar e exibir pedidos de tipo de postagem personalizados é usando a propriedade menu_order

Aqui está o jquery para tornar a lista ordenável e para passar os dados via ajax para o wordpress:

jQuery(document).ready(function($) {        
    var itemList = $('#sortable');

    itemList.sortable({
        update: function(event, ui) {
            $('#loading-animation').show(); // Show the animate loading gif while waiting

            opts = {
                url: ajaxurl, // ajaxurl is defined by WordPress and points to /wp-admin/admin-ajax.php
                type: 'POST',
                async: true,
                cache: false,
                dataType: 'json',
                data:{
                    action: 'item_sort', // Tell WordPress how to handle this ajax request
                    order: itemList.sortable('toArray').toString() // Passes ID's of list items in  1,3,2 format
                },
                success: function(response) {
                    $('#loading-animation').hide(); // Hide the loading animation
                    return; 
                },
                error: function(xhr,textStatus,e) {  // This can be expanded to provide more information
                    alert(e);
                    // alert('There was an error saving the updates');
                    $('#loading-animation').hide(); // Hide the loading animation
                    return; 
                }
            };
            $.ajax(opts);
        }
    }); 
});

Aqui está a função wordpress que ouve o retorno de chamada do ajax e executa as mudanças no banco de dados:

function my_save_item_order() {
    global $wpdb;

    $order = explode(',', $_POST['order']);
    $counter = 0;
    foreach ($order as $item_id) {
        $wpdb->update($wpdb->posts, array( 'menu_order' => $counter ), array( 'ID' => $item_id) );
        $counter++;
    }
    die(1);
}
add_action('wp_ajax_item_sort', 'my_save_item_order');
add_action('wp_ajax_nopriv_item_sort', 'my_save_item_order');

A chave para exibir as postagens na ordem que você salvou é adicionar a propriedade menu_order aos argumentos da consulta:

$args= array(
    'meta_key' => 'c3m_shown_on',
    'meta_value'=> 'home'
    'orderby' => 'menu_order',
    'order' => 'ASC'
);

$box_query = new WP_Query($args);

Em seguida, execute o loop e a saída de cada item ... (a primeira linha é a animação do carregamento do núcleo wp - você vai querer escondê-la inicialmente via css e, em seguida, a função jquery será exibida durante o processamento)

<img src="<?php bloginfo('url'); ?>/wp-admin/images/loading.gif" id="loading-animation" />
<ul id="sortable">
    <li id="{echo post ID here}">{echo title or other name here}</li>
</ul>

Código inspirado pelo excelente tutorial do soulsizzle .

    
por somatic 06.05.2011 / 23:26
4

enlace

Longe de terminar, mas a idéia é enviar um pedido de ajax para arrastar e soltar. Você também pode acionar a solicitação do ajax somente depois de clicar em um botão "salvar" ou algo assim. Uma matriz contendo IDs de postagem e novo pedido seria enviada.

Então você teria que atualizar as postagens no banco de dados no final do servidor. Por fim, adicione um parâmetro order ao seu loop WP_Query .

Espero que isso comece você. Alguém se sente livre para continuar mexendo.

    
por Geert 04.05.2011 / 17:04