拖动时可排序列表编号未按顺序显示（使用 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

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

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

Answer 2

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

.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 从编号递增。

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;
}

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

Sortable list numbers are not showing in order while dragging (using jQuery)

javascript

jquery

jquery-ui

list

jquery-ui-sortable