javascript - JQuery UI 可排序添加元素？

Question

我正在尝试使用 JQuery UI 的拖/放功能和可排序功能。当您对“放置区域”中的元素进行排序时，它似乎添加了另一个(空)元素。

HTML

<ul id="sortable" class="drop">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

JS

$("#sortable").sortable();

$( '.drop' ).droppable({
  drop: function (event, ui) {
    document.getElementById('length').innerHTML = document.querySelectorAll('#sortable li').length;
  }
});

您可以在这里尝试一下:https://jsfiddle.net/udj6p93f/2/

继续对元素进行排序，即使只有 5 个元素，length 也会变为 6。这是怎么回事？

Answer 1

我已经复制了这一行

document.getElementById('length').innerHTML = document.querySelectorAll('#sortable li').length;

就在之后

$("#sortable").sortable();

这是 5 个。检查元素，拖放 1 个元素。它又添加了一项列表项。

<li class="ui-sortable-placeholder ui-sortable-handle" style="visibility: hidden;"></li>

我认为这是因为这个。

修复建议:

$("#sortable").sortable();

$( '.drop' ).droppable({
  drop: function (event, ui) {
    document.getElementById('length').innerHTML = document.querySelectorAll('#sortable li').length - document.querySelectorAll('#sortable li.ui-sortable-placeholder').length;
  }
});