可在 Bootstrap 3 导航中对 li 项目进行排序的 jQuery UI

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