拖动(使用jQuery）时，可排序列表编号没有按顺序显示

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

本文关键字：编号 列表 显示 顺序 排序 使用 jQuery 拖动      更新时间：2023-09-26

对于可排序列表，我有以下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>

正如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计数器排除占位符元素。

这里是一个使用CSS3计数器的简单示例，它使用list-style: none删除默认数字，然后使用:not()伪类从编号递增中排除.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;
}

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

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

相关文章：