拖动时可排序的列表编号未按顺序显示（使用 jQuery）

Question

我有以下jQuery\Javascript\HTML 代码用于可排序列表，它工作正常，除了拖动错误的数字显示。例如，将 character2 拖到 character1 插槽时，会显示数字“3”。有谁知道这是为什么以及如何解决它？我现在还包含了一个 Stack Snippet，这样你就可以看到发生了什么......

function menuClicked(menuId) {
  switch (menuId) {
    case "formation":
      document.getElementById("storybox").innerHTML = "<h1>Formation</h1><h2>Drag characters to change positions</h2><ol class='sortable' id='charlist'><li><h3 class='charname'>Dragon-Bear</h3></li><li><h3 class='charname'>Deer-Wolf</h3></li></ol>";
      $(function() {
        $(".sortable").sortable();
        $(".sortable").disableSelection();
      });
      break;
  }
}

.charname:hover   {
  cursor: pointer; 
}

<script src="http://www.orderofthemouse.co.uk/js/vendor/jquery-1.11.3.min.js"></script>
<script src="http://www.orderofthemouse.co.uk/js/vendor/jquery-ui.min.js"></script>
<ol>
  <li id="ChangeFormation" onclick="menuClicked('formation')">
    <a href="#formation">Change Formation</a>
    <div id="storybox"></div>
  </li>
</ol>

Answer 1

正如 Kaivosukeltaja 指出的那样，可排序插件添加了一个占位符 li 元素和 CSS 规则 visibility: hidden。如果将元素的display设置为none，显然不会考虑在内，编号会按预期工作。然而，这违背了拥有一个占位符元素的全部意义（因为现在，没有任何东西会占据当前被拖动元素的空间）。

.ui-sortable-placeholder {
  display: none;
}

function menuClicked(menuId) {
  switch (menuId) {
    case "formation":
      document.getElementById("storybox").innerHTML = "<h1>Formation</h1><h2>Drag characters to change positions</h2><ol class='sortable' id='charlist'><li><h3 class='charname'>Dragon-Bear</h3></li><li><h3 class='charname'>Deer-Wolf</h3></li></ol>";
      $(function() {
        $(".sortable").sortable();
        $(".sortable").disableSelection();
      });
      break;
  }
}

.charname:hover {
  cursor: pointer;
}
.ui-sortable-placeholder {
  display: none;
}

<script src="http://www.orderofthemouse.co.uk/js/vendor/jquery-1.11.3.min.js"></script>
<script src="http://www.orderofthemouse.co.uk/js/vendor/jquery-ui.min.js"></script>
<ol>
  <li id="ChangeFormation" onclick="menuClicked('formation')">
    <a href="#formation">Change Formation</a>
    <div id="storybox"></div>
  </li>
</ol>

如果这是一个问题，更好的解决方案是删除默认编号，并使用CSS3 counters 排除占位符元素。

这是一个使用 CSS3 计数器的简单示例，它使用 list-style: none 删除默认数字，然后使用 :not() pseudo class 从编号递增中排除 .ui-sortable-placeholder 元素。

ol {
  list-style: none;
}
ol li:not(.ui-sortable-placeholder) {
  counter-increment: number;
}
ol li:before {
  content: counter(number)'. ';
}
.ui-sortable-placeholder {
  visibility: hidden;
}

<ol>
  <li>one</li>
  <li class="ui-sortable-placeholder">two</li>
  <li>three</li>
</ol>

在您的情况下，您可以使用以下内容：

function menuClicked(menuId) {
  switch (menuId) {
    case "formation":
      document.getElementById("storybox").innerHTML = "<h1>Formation</h1><h2>Drag characters to change positions</h2><ol class='sortable' id='charlist'><li><h3 class='charname'>Dragon-Bear</h3></li><li><h3 class='charname'>Deer-Wolf</h3></li></ol>";
      $(function() {
        $(".sortable").sortable();
        $(".sortable").disableSelection();
      });
      break;
  }
}

.charname:hover {
  cursor: pointer;
}
.ui-sortable {
  list-style: none;
}
.ui-sortable > li:not(.ui-sortable-placeholder) {
  counter-increment: number;
}
.ui-sortable > li:before {
  content: counter(number)'. ';
}
.ui-sortable-placeholder {
  visibility: hidden;
}
.ui-sortable h3 {
  display: inline-block;
  margin-bottom: 0;
}

<script src="http://www.orderofthemouse.co.uk/js/vendor/jquery-1.11.3.min.js"></script>
<script src="http://www.orderofthemouse.co.uk/js/vendor/jquery-ui.min.js"></script>
<ol>
  <li id="ChangeFormation" onclick="menuClicked('formation')">
    <a href="#formation">Change Formation</a>
    <div id="storybox"></div>
  </li>
</ol>

.ui-sortable {
  list-style: none;
}
.ui-sortable > li:not(.ui-sortable-placeholder) {
  counter-increment: number;
}
.ui-sortable > li:before {
  content: counter(number)'. ';
}
.ui-sortable-placeholder {
  visibility: hidden;
}

Answer 2

jQuery 的Sortable 插件通过创建一个额外的<li> 元素来充当被拖动项目的新位置的占位符。这将由浏览器计算，即使元素设置为visibility: hidden，也会导致数字增加。

似乎没有办法使用 CSS 省略 <ol> 数字，因此解决此问题的最佳方法可能是隐藏列表的本机数字并自己计算它们，更新可排序的 @987654324 上的数字@事件。