javascript - より複雑なリスト アイテムのコンテンツに対して JQuery UI の並べ替えが機能しない

Question

適切に動作するためにソート可能になるのに混乱しています：

これは私が期待するように動作します:

<ul class="unstyled" id="resource-list">
 <li>a</li>
 <li>b</li>
 <li>c</li>
</ul>


$("#resource-list").sortable()
$("#resource-list").disableSelection()

しかし、これはそうではありません

<ul class="unstyled" id="resource-list">
 <li>
 <div class="span3">
  <button class="btn btn-link"><i class="icon-remove"></i></button>
 </div>
 <div class="span9">
      <img class="img-polaroid" src="https:s3.etc.grover-00001.png">
     </div>
 </li>
 <li>
 <div class="span3">
  <button class="btn btn-link"><i class="icon-remove"></i></button>
 </div>
 <div class="span9">
      <img class="img-polaroid" src="https:s3.etc.grover-00002.png"></div>
 </li>
 <li>
 <div class="span3">
  <button class="btn btn-link"> <i class="icon-remove"></i></button>
 </div>
 <div class="span9">
       <img class="img-polaroid" src="https:s3.etc.grover-00003.png">
     </div>
 </li>
</ul>

$("#resource-list").sortable()
$("#resource-list").disableSelection()

2 番目のケースでは<li>s、適切にレンダリングされ、多かれ少なかれ期待どおりにドラッグされているように見えますが、解放すると、リストは元の順序に戻ります。sort、create、および stop イベントは発生していますが、update は発生していません。

ここで試してみたところ、適切にソートされました。

関連性があると思われる場合は、ここでブートストラップと流星を使用しています。