JQuery UIソート可能な要素を追加しますか？

Question

JQuery UIのドラッグ＆ドロップをソート可能にしようとしています。 「ドロップゾーン」内の要素を並べ替えると、別の（null）要素を追加するように見えます。

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要素が5つしかなくても、lengthは6になります。何が起きてる？

Answer 1

私はそれが1つの要素をドロップ5、検査要素、ドラッグアンドちょうど

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

後、この行

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

をコピーしました。もう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; 
    } 
});