Question

如何使具有相同类名#sortable的div能够进行此排序。

这是一个示例

更新

      <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_order&" + order
        });
    }});
    $("#sortable").disableSelection();
});
</script>

Answer 1

$("#sortable")将选择所有ID等于“可排序”而不是类的标签。
检查控制台。您是否遇到关于.sortable的任何错误？
类名'#sortable'无效。将其更改为“ sortable”并将选择器更改为$(".sortable")。现在可以用吗？

编辑确切地说，（3）在HTML5中有效。更好的做法是用字母开头您的班级/ ID名称。如果必须使用“＃”，则必须在jQ选择器中对其进行转义。这是不必要的混乱。

Answer 2

我想你可能会这样说：

    <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_order&" + order
      });
      }});
      $(".sortable").disableSelection();
      });
      </script>

还将id属性更改为class并尝试！

如何使具有相同类名的多个div可排序工作

2 个答案: