¿Cómo guardar el estado de un editor de diseño frontend con drag and drop usando jQuery UI Sortables?

Estoy construyendo un editor de diseño de entradas para el frontend usando jQuery UI Sortable.

Las entradas están dispuestas en cajas de 300px por 250px sobre una imagen de fondo. Las entradas se crean y editan usando el panel de WordPress pero quiero permitir que el administrador del sitio ajuste el orden de las cajas usando una interfaz de arrastrar y soltar en el frontend.

Ya tengo funcionando la parte de arrastrar y soltar, pero necesito encontrar una manera de guardar el estado (orden) de las cajas. Idealmente me gustaría poder guardar el estado como una opción e incorporarlo en la consulta.

La consulta para las entradas es un simple WP_Query que también obtiene datos de metaboxes personalizados para determinar el diseño individual de cada caja:

$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);
    
    // Si hay un enlace externo, usarlo, sino usar el enlace de la entrada
    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="Imagen 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>

El javascript es simplemente las instrucciones básicas por defecto de sortable

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

Hay métodos disponibles usando cookies para guardar el estado pero también necesito deshabilitar el arrastrar y soltar para usuarios no administradores, así que realmente necesito guardar en la base de datos.

Estoy buscando el método más creativo y usable y otorgaré una recompensa de 100 puntos a la mejor respuesta.

Actualización:

Conseguí que la respuesta de somatic funcionara con un pequeño cambio.

ajaxurl no devuelve el valor en páginas no administrativas, así que usé wp_localize_script( 'functions', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); para definir el valor y cambié la línea de javascript bajo options a:
url: MyAjax.ajaxurl,

Para limitar el acceso a ordenar solo a administradores, agregué una condicional a mi función 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' ) ) );
    }
}

Voy a hacer algunas pruebas más y marcar esta pregunta como resuelta y otorgar la recompensa.