jQueryUI를 사용하여 삭제할 때 항목 번호를 업데이트하십시오.

Question

이 작업 종류는 있지만 두 번째 드롭에만 업데이트됩니다. 여기서 내가 뭘 잘못하고 있니?

끌어서 놓기를 사용하여 재정렬 할 때 기본적으로 "span.digit"을 업데이트하려고합니다. 이렇게하면 번호가 목록의 새 위치와 일치하도록 업데이트됩니다. 내가이 일을하는 것에 가깝다는 것을 압니다. 내가 뭘 잘못하고 있는지 확실하지 않습니다. 모든 설명이 도움이 될 것입니다. 감사!

$("#sortableQb2").droppable({ 
    drop: function(event, ui) { 
     $('#sortableQb2 > li').each(function (i) { 
      var humanNum = i + 1; 
      $(this).find("span.digit").html(humanNum + ''); 
     }); 
    } 
}); 

<ul id="sortableQb2"> 
    <li> 
     <ul> 
      <li> 
       <a href="#!" class="btn btn-link"><span class="digit">1</span>Some Item</a> 
      </li> 
      <li> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <ul> 
      <li> 
       <a href="#!" class="btn btn-link"><span class="digit">2</span>Some Item</a> 
      </li> 
      <li> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <ul> 
      <li> 
       <a href="#!" class="btn btn-link"><span class="digit">3</span>Some Item</a> 
      </li> 
      <li> 
      </li> 
     </ul> 
    </li> 
</ul> 

바이올린 : https://jsfiddle.net/o6t095h9/2/

Answer 1

내가 그것을 알아 냈 ...

$(function() { 
    $("#sortableQb2").sortable({ 
     update: function(event, ui) { 
      $('#sortableQb2 > li > ul > li > a > span.digit').each(function (i) { 
       var humanNum = i + 1; 
       $(this).html(humanNum + ''); 
      }); 
     } 
    }); 
}); 

바이올린 : https://jsfiddle.net/o6t095h9/3/