jQuery UI可以对Bootstrap 3 nav中的li项进行排序

Question

我有一个简单的Bootstrap 3导航栏，其中包含以下HTML：

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Brand</a>
  </div>
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
      <li><a href="#">Page 4</a></li>
    </ul>
  </div>
</nav>

我想让li个元素可以排序：能够重新排序它们。

我试过了：

$("ul>li").sortable();

我可以拖动页面，但我不能将它们放在另一个地方（例如demo中）。

如何解决此问题？

请参阅以下内容：JSFIDDLE。

Answer 1

仅使用类名.name而不是元素名称作为选择器

$(".nav").sortable();

Fiddle Demo