jQuery UI - 手风琴 - 可排序问题

Question

我遇到了手风琴的可排序交互问题。应该可以拖动 <h3> 元素并更改它们的顺序。我尝试使用官方演示（here）中的功能，但排序不"work"。

这是完整示例的 CodePen：https://codepen.io/pprunesquallor/pen/awWREP

（我的脚本确实包含其他内容（用于图标、折叠和调整大小），但我不想排除这些内容，因为我想在此基础上进行构建。）

  $( function() {

    var icons = {
      header: "ui-icon-circle-arrow-e",
      activeHeader: "ui-icon-circle-arrow-s"
    };

    $( "#accordion" ).accordion({
        icons: icons,
        collapsible: true,
        heightStyle: "fill"
    });

    $( "#accordion-resizer" ).resizable({
      minHeight: 140,
      minWidth: 200,
      resize: function() {
        $( "#accordion" ).accordion( "refresh" );
      }
    });

  $("#accordion")
    .accordion({
      header: " > h3"
    })
    .sortable({
      axis: "y",
      handle: "h3",
      stop: function(event, ui) {
        ui.item.children("h3").triggerHandler("focusout");
        $(this).accordion("refresh");
      }
    });

  });

我在这里发现了另一个用户的类似问题，他的问题不是将 <h3> 和 <p> 元素包含在附加的 <div> 中，所以我假设这也有与“> div > h3”和我的 HTML 有关，但我尝试了所有组合并且 none 有效...

提前致谢。

Answer 1

只需按如下方式添加您的项目，缺少 .group 字段：

   
  $( function() {

    var icons = {
      header: "ui-icon-circle-arrow-e",
      activeHeader: "ui-icon-circle-arrow-s"
    };

$("#accordion")
    .accordion({
      icons: icons,
      collapsible: true,
      heightStyle: "fill",
      header: "> div > h3"
    })
    .sortable({
      axis: "y",
      handle: "h3",
      stop: function(event, ui) {
        ui.item.children("h3").triggerHandler("focusout");
        $(this).accordion("refresh");
      }
    });
    $( "#accordion-resizer" ).resizable({
      minHeight: 140,
      minWidth: 200,
      resize: function() {
        $( "#accordion" ).accordion( "refresh" );
      }
    });

  

  });

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<body>

  <div id="accordion-resizer" class="ui-widget-content">
    <div id="accordion">
      <div class="group">
        <h3>I'm open by default</h3>
        <div>
          <p>
            One
          </p>
        </div>
      </div>
      <div class="group">
        <h3>Open me!</h3>
        <div>
          <p>
            Two
          </p>
        </div>
      </div>
      <div class="group">
        <h3>Open me, you won't regret it!</h3>
        <div>
          <p>
            Three
          </p>
        </div>
      </div>
      <div class="group">
        <h3>I'm the one you're looking for!!</h3>
        <div>
          <p>
            JK, nothing in here
          </p>
        </div>
      </div>
    </div>
  </div>
</body>

jQuery UI - 手风琴 - 可排序问题

jQuery UI - accordion - sortable issue

html

jquery

jquery-ui

accordion

jquery-ui-sortable