Sürükle ve bırak jQuery UI Sortables ön uç düzen düzenleyicisinin durumu nasıl kaydedilir?

JQuery UI Sortable kullanarak bir ön uç düzen düzenleyicisi inşa ediyorum .

Direkler 300px ile 250px kutularda bir arka plan görüntüsü üzerine yerleştirilir. Mesajlar WordPress yöneticisi kullanılarak oluşturulur ve düzenlenir, ancak site yöneticisinin ön uçta bir sürükle ve bırak arayüzü kullanarak kutuların sırasını ayarlamasına izin vermek istiyorum.

Sürükle ve bırak sıralanabilir kısmı çalıştım ama kutuların durumunu (sırasını) kaydetmek için bir yol bulmalıyım. İdeal olarak bir seçenek olarak devlet kaydetmek ve sorgu içine inşa etmek istiyorum.

Mesajlar için sorgu da bireysel meta düzenini belirlemek için özel meta kutularından veri alır basit bir WP_Query olduğunu .:

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

Javascript sadece temel varsayılan sıralanabilir talimatlardır

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

Çerezleri kullanarak kullanılabilecek yöntemler vardır kaydetmek için ama ben yönetici olmayan kullanıcılar için sıralanabilir sürükle bırak devre dışı bırakmak gerekir, bu yüzden gerçekten veritabanına kaydetmek gerekir.

En yaratıcı ve kullanışlı yöntemi arıyorum ve en iyi cevaba 100 puan ödül vereceğim.

Güncelleme:

Somatik bir cevabı küçük bir değişiklikle çalışırken aldım .

ajaxurl değeri yönetici olmayan sayfalarda döndürmez, bu yüzden wp_localize_script( 'functions', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );değeri tanımlamak için kullanılır ve seçenekler altındaki javascript satırını şu şekilde değiştiririm:
url: MyAjax.ajaxurl,

Sadece yöneticiler için sipariş düzenleme erişimini sınırlamak için wp_enqueue_script fonksiyonuma bir koşul ekledim:

    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' ) ) );
    }
}

Biraz daha test yapacağım ve bu soruyu çözülmüş olarak işaretleyeceğim ve ödülünü vereceğim.

Brady, özel gönderi türü siparişlerini kaydetme ve görüntülemenin en iyi yolunun, menu_order özelliği

Listeyi sıralanabilir hale getirmek ve verileri ajax aracılığıyla wordpress'e aktarmak için jquery:

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);
        }
    }); 
});

Ajax geri aramasını dinleyen ve DB'de değişiklikleri gerçekleştiren wordpress işlevi şunlardır:

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');

Kayıtları kaydettiğiniz sırayla görüntülemenin anahtarı menu_orderözelliği sorgu değişkenlerine eklemektir :

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

$box_query = new WP_Query($args);

Sonra döngünüzü çalıştırın ve her öğeyi çıktılayın ... (ilk satır çekirdek wp yükleme animasyonu - başlangıçta css ile gizlemek isteyeceksiniz ve daha sonra jquery işlevi işlenirken görüntülenecektir)

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

Soulsizzle'ın mükemmel eğitiminden esinlenen kod .

http://jsfiddle.net/TbR69/1/

Bitmiş olmaktan uzak, ancak fikir sürükle ve bırak üzerine bir ajax isteği göndermek. Ajax isteğini yalnızca "kaydet" düğmesine veya başka bir şeye tıkladıktan sonra da başlatmak isteyebilirsiniz. Posta kimlikleri ve yeni sipariş içeren bir dizi gönderilir.

Ardından, sunucu ucundaki veritabanındaki yayınları güncellemeniz gerekir. Son olarak, döngünüze bir orderparametre ekleyin WP_Query.

Umarım bu seni başlatır. Herkes eğlenmeye devam edebilir.

/**
 *  Enqueue javascript and css files
 */
function uc_enqueue_my_assets() {
    wp_enqueue_script( 'jquery-ui-sortable');
    wp_register_script( 'order', plugins_url( '/js/order.js', __FILE__ ), array( 'jquery' ) );
    wp_enqueue_script( 'order' );
}

function uc_is_user_logged_in()
{
    if ( is_user_logged_in()) {
        add_action( 'wp_enqueue_scripts', 'uc_enqueue_my_assets' );
        add_action( 'admin_enqueue_scripts', 'uc_enqueue_my_assets' );
    }
}
add_action('init', 'uc_is_user_logged_in');


/**
 *  Update order of posts by ajax on trigger of drag and drop event
 */
function uc_sort_post_items() {

    $order = wp_parse_id_list(explode(',', $_POST['order']));
    write_log($order);

    global $wpdb;
    $list = join(', ', $order);
    $wpdb->query('SELECT @i:=0');
    $wpdb->query(
        "UPDATE wp_posts SET menu_order = ( @i:= @i+1 )
        WHERE ID IN ( $list ) ORDER BY FIELD( ID, $list );"
    );

    wp_die();
}
add_action('wp_ajax_uc_sort_post_items', 'uc_sort_post_items');
add_action('wp_ajax_nopriv_uc_sort_post_items', 'uc_sort_post_items');



/**
 *  Display sorted posts
 */
function uc_pre_get_posts( $wp_query ) {
    write_log(basename($_SERVER['PHP_SELF']));
    $wp_query->set('orderby', 'menu_order');
    $wp_query->set('order', 'ASC');
}
add_action( 'pre_get_posts', 'uc_pre_get_posts', 1 );

Javascript dosyası order.js

$('#the-list').sortable({
        update: function(event, ui) {

            $.ajax({

                url: '/wp-admin/admin-ajax.php',
                type: 'post',
                dataType: 'json',
                data:{
                    action: 'uc_sort_post_items', // Tell WordPress how to handle this ajax request
                    order: '4567,4569,4565 ' // Passes ID's of list items in  1,3,2 format. Write your own js method to access the list of id from frontend.
                },
                success: function(data, response) {
                    console.log(response);
                },
                error: function(xhr,textStatus,e) {
                    alert(e);
                }

                });

        }
    });