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/

來吧，SOR t的元素，你會成爲6，即使只有5個元素，即length。這裏發生了什麼？

Answer 1

我剛纔

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

後複製此行

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

它是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; 
    } 
});