title: JQuery UI sortable not working for more complex list item contents
body: <p>I'm having a confusing time getting sortable to behave properly:</p>
  
  <p>this works as I'd expect:</p>
  
  <pre><code>&lt;ul class="unstyled" id="resource-list"&gt;
   &lt;li&gt;a&lt;/li&gt;
   &lt;li&gt;b&lt;/li&gt;
   &lt;li&gt;c&lt;/li&gt;
  &lt;/ul&gt;
  
  
  $("#resource-list").sortable()
  $("#resource-list").disableSelection()
  </code></pre>
  
  <p>but this doesn't</p>
  
  <pre><code>&lt;ul class="unstyled" id="resource-list"&gt;
   &lt;li&gt;
   &lt;div class="span3"&gt;
    &lt;button class="btn btn-link"&gt;&lt;i class="icon-remove"&gt;&lt;/i&gt;&lt;/button&gt;
   &lt;/div&gt;
   &lt;div class="span9"&gt;
        &lt;img class="img-polaroid" src="https:s3.etc.grover-00001.png"&gt;
       &lt;/div&gt;
   &lt;/li&gt;
   &lt;li&gt;
   &lt;div class="span3"&gt;
    &lt;button class="btn btn-link"&gt;&lt;i class="icon-remove"&gt;&lt;/i&gt;&lt;/button&gt;
   &lt;/div&gt;
   &lt;div class="span9"&gt;
        &lt;img class="img-polaroid" src="https:s3.etc.grover-00002.png"&gt;&lt;/div&gt;
   &lt;/li&gt;
   &lt;li&gt;
   &lt;div class="span3"&gt;
    &lt;button class="btn btn-link"&gt; &lt;i class="icon-remove"&gt;&lt;/i&gt;&lt;/button&gt;
   &lt;/div&gt;
   &lt;div class="span9"&gt;
         &lt;img class="img-polaroid" src="https:s3.etc.grover-00003.png"&gt;
       &lt;/div&gt;
   &lt;/li&gt;
  &lt;/ul&gt;
  
  $("#resource-list").sortable()
  $("#resource-list").disableSelection()
  </code></pre>
  
  <p>In the second case, the <code>&lt;li&gt;s</code> render properly, and seem to more or less drag as expected, but when released, the list returns to its original ordering. the sort, create, and stop events are firing, but update does not. </p>
  
  <p>Now I tried it <a href="http://jsfiddle.net/R8fFK/" rel="nofollow">here</a> and it sorts properly. </p>
  
  <p>I'm using bootstrap and meteor here, if that seems relevant.</p>