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();

我可以拖動頁面，但我不能將它們放在另一個地方（比如在演示中 ）。

我該如何解決這個問題？

請參閱以下內容： JSFIDDLE 。

Answer 1

僅使用類名.name而不是元素名作為選擇器

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

小提琴演示