Question

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

＆＃13;

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

＆＃13;

.charname:hover   {
  cursor: pointer; 
}

＆＃13;

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

＆＃13;

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的可排序插件的工作原理是创建一个额外的<li>元素，作为拖动项目新位置的占位符。这将由浏览器计算，即使元素设置为visibility: hidden，也会导致数字增加。

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

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

2 个答案: