Как сохранить состояние редактора макета jQuery UI Sortables с перетаскиванием на фронтенде?

Я создаю редактор макета записей на фронтенде с использованием jQuery UI Sortable.

Записи расположены в блоках размером 300px на 250px поверх фонового изображения. Записи создаются и редактируются через админку WordPress, но я хочу позволить администратору сайта настраивать порядок блоков с помощью drag and drop интерфейса на фронтенде.

Я реализовал функционал перетаскивания sortable, но нужно придумать способ сохранения состояния (порядка) блоков. В идеале я хотел бы иметь возможность сохранять состояние как опцию и встроить его в запрос.

Запрос для постов - это простой WP_Query, который также получает данные из пользовательских мета-полей для определения макета отдельных блоков:

$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="Изображение с 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 - это просто базовые инструкции sortable по умолчанию

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

Существуют методы с использованием cookies для сохранения состояния, но мне также нужно отключить перетаскивание sortable для пользователей без прав администратора, поэтому мне действительно нужно сохранять в базу данных.

Я ищу наиболее креативный и удобный метод и назначу награду в 100 баллов за лучший ответ.

Обновление:

Я заставил ответ somatic работать с одним небольшим изменением.

ajaxurl не возвращает значение на не-административных страницах, поэтому я использовал wp_localize_script( 'functions', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); для определения значения и изменил строку javascript в опциях на:
url: MyAjax.ajaxurl,

Чтобы ограничить доступ к изменению порядка только для администраторов, я добавил условие в мою функцию 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' ) ) );
    }
}

Я собираюсь провести еще небольшое тестирование и отметить этот вопрос как решенный и выдать награду.