So speichern Sie den Status einer jQuery-Benutzeroberfläche mit Ziehen und Ablegen Sortiert den Front-End-Layout-Editor?

Ich baue einen Front-End-Post-Layout-Editor mit jQuery UI Sortable .

Die Pfosten sind in 300px mal 250px Boxen über einem Hintergrundbild angeordnet. Die Posts werden mit dem WordPress-Admin erstellt und bearbeitet, aber ich möchte dem Site-Administrator erlauben, die Reihenfolge der Boxen über eine Drag & Drop-Schnittstelle am Frontend anzupassen.

Ich habe das sortierbare Drag & Drop-Teil, aber ich muss einen Weg finden, den Zustand (Reihenfolge) der Boxen zu speichern. Idealerweise möchte ich den Zustand als Option speichern und in die Abfrage einbauen können.

Die Abfrage für die Posts ist eine einfache WP_Query, die auch Daten aus benutzerdefinierten Metaboxen erhält, um das individuelle Box-Layout zu bestimmen .:

$args= array( 'meta_key' => 'c3m_shown_on', 'meta_value'=> 'home' ); $box_query = new WP_Query($args); ?> 
    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=" ui-state-default"> <article id="post-"> <?php echo 'Image via xxxxx.com'; ?> <div class="post-box ">

    <a href="https://wordpress.stackexchange.com/questions/16342/how-to-save-the-state-of-a-drag-and-drop-jquery-ui-sortables-front-end-layout-ed/">

    post_excerpt, 0, 90) . '...'; ?>

Das Javascript ist nur die grundlegenden sortierbaren statementen

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

Es gibt Methoden, die Cookies verwenden , um den Status zu speichern, aber ich muss auch das sortierbare Ziehen und Ablegen für Benutzer ohne Administratorrechte deaktivieren, sodass ich wirklich in der database speichern muss.

Ich suche nach der kreativsten und brauchbarsten Methode und werde eine 100 Punkte Prämie für die beste Antwort vergeben.

Aktualisieren:

Ich habe somatic’s Antwort mit einer kleinen Änderung bearbeitet.

ajaxurl gibt den Wert auf Nicht-Admin-Seiten nicht zurück, also habe ich wp_localize_script( 'functions', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); um den Wert zu definieren und die JavaScript-Zeile unter Optionen zu ändern:
url: MyAjax.ajaxurl,

Um den Zugriff auf die Bestellung auf nur Administratoren zu beschränken, habe ich eine Bedingung für meine wp_enqueue_script-function hinzugefügt:

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

Ich werde ein bisschen mehr Tests machen und diese Frage als getriggers markieren und das Kopfgeld vergeben.

Solutions Collecting From Web of "So speichern Sie den Status einer jQuery-Benutzeroberfläche mit Ziehen und Ablegen Sortiert den Front-End-Layout-Editor?"

Brady ist der Ansicht, dass die beste Methode zum Speichern und Anzeigen benutzerdefinierter Auftragstypen mithilfe der Eigenschaft menu_order

Hier ist die Jquery, um die Liste sortierbar zu machen und die Daten via Ajax an WordPress zu übergeben:

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

Hier ist die WordPress-function, die auf den Ajax-Callback wartet und die Änderungen in der DB durchführt:

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

Der Schlüssel zum Anzeigen der Posts in der von Ihnen gespeicherten Reihenfolge ist das Hinzufügen der Eigenschaft menu_order zu den Abfrageargumenten:

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

Dann führe deine Schleife aus und gib jedes Element aus … (erste Zeile ist die core-wp-Lade-Animation – du willst sie anfangs über CSS verstecken, und dann wird die jQuery-function bei der Verarbeitung angezeigt)

  
  • {echo title or other name here}

Der Code wurde von seelsizzles hervorragendem Tutorial inspiriert.

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

Noch lange nicht fertig, aber die Idee ist, eine Ajax-Anfrage per Drag & Drop zu senden. Sie können die Ajax-Anfrage auch erst auslösen, nachdem Sie auf “Speichern” geklickt haben. Ein Array mit Post-IDs und neuer Reihenfolge wird gesendet.

Dann müssten Sie die Posts in der database auf dem Serverende aktualisieren. WP_Query Ihrer WP_Query Schleife schließlich einen order WP_Query .

Ich hoffe, das bringt dich in Schwung. Jeder fühlt sich frei, weiter zu fummeln.