title: jQuery UI sortable for li items in Bootstrap 3 nav
body: <p>I have a simple Bootstrap 3 navbar having the following HTML:</p>
  
  <pre><code>&lt;nav class="navbar navbar-default" role="navigation"&gt;
    &lt;div class="navbar-header"&gt;
      &lt;a class="navbar-brand" href="#"&gt;Brand&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
      &lt;ul class="nav navbar-nav"&gt;
        &lt;li class="active"&gt;&lt;a href="#"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Page 2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Page 3&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Page 4&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>I want to make the <code>li</code> elements sortable: to be able do reorder them.</p>
  
  <p>I tried:</p>
  
  <pre><code>$("ul&gt;li").sortable();
  </code></pre>
  
  <p>I can drag the pages, but I can't drop them in another place (like in the <a href="http://jqueryui.com/sortable/#default" rel="nofollow">demo</a>).</p>
  
  <p>How can I fix this behaviour?</p>
  
  <p>See the follwing: <a href="http://jsfiddle.net/tFmnE/" rel="nofollow"><strong>JSFIDDLE</strong></a>.</p>