Блог

Как заставить эту сортировку работать с несколькими разделами с одинаковым именем класса #sortable.

вот пример

Обновить

       <div class="multi-fields" id="sortable">
          //something
      </div>

      <div class="multi-fields" id="sortable">
          //another something
      </div>
  

сортируемый

 <script type="text/javascript">
var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
jQuery(document).ready(function($) { 
    $("#sortable").sortable({
        cursor:'move',
        opacity: 0.5,
        cursor: 'pointer',
        axis: 'y',
        update:function(event, ui){
    var order = $('#sortable').sortable('serialize');
    $.ajax({
        type: "POST",
        url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
        data: "action=update_field_orderamp;"   order
        });
    }});
    $("#sortable").disableSelection();
});
</script>
  

1. $("#sortable") будут выбраны все теги с идентификатором, равным «сортируемому», А НЕ классы.
2. Проверьте свою консоль. Вы получаете какие-либо ошибки, касающиеся .sortable ?
3. Имя класса ‘#sortable’ недопустимо. Измените его на «sortable» и измените селектор на $(".sortable") . Работает ли это сейчас?

РЕДАКТИРОВАТЬ, чтобы быть точным, (3) допустимо в HTML5. Все же лучше начинать имена ваших классов / идентификаторов с буквы. В случае, если вам придется использовать ‘#’, вам придется экранировать его в селекторе jQ. Это ненужная путаница.

Я думаю, вы могли бы сказать это:

     <script type="text/javascript">
      var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
      jQuery(document).ready(function($) { 
      $(".sortable").sortable({
      cursor:'move',
      opacity: 0.5,
      cursor: 'pointer',
      axis: 'y',
      update:function(event, ui){
       var order = $('.sortable').sortable('serialize');
      $.ajax({
        type: "POST",
        url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
        data: "action=update_field_orderamp;"   order
      });
      }});
      $(".sortable").disableSelection();
      });
      </script>
  

Измените также атрибут id на class и попробуйте!