jQuery的nestedSortable

Question

我試圖使用jQuery.nestedSortable插件從here，它不工作。

它可以在網站上，但即使當我查看網頁的源文件，並保存爲HTML，這是行不通的。

這裏是我的代碼：

HTML：

<ol class="sortable"> 
     <li id="list_1"><div>A</div></li> 
      <ol> 
       <li id="list_2"><div>1</div></li> 
       <li id="list_3"><div>2</div></li> 
       <li id="list_4"><div>3</div></li> 
       <li id="list_5"><div>4</div></li> 
      </ol> 
     <li id="list_6"><div>B</div></li> 
      <ol> 
       <li id="list_7"><div>1</div></li> 
       <li id="list_8"><div>2</div></li> 
      </ol> 
    </ol> 

的javascript：

$('ol.sortable').nestedSortable({ 
     disableNesting: 'no-nest', 
     forcePlaceholderSize: true, 
     handle: 'div', 
     helper: 'clone', 
     items: 'li', 
     maxLevels: 2, 
     opacity: .6, 
     placeholder: 'placeholder', 
     revert: 250, 
     tabSize: 25, 
     tolerance: 'pointer', 
     toleranceElement: '> div' 
    }); 

我覺得這應該是足以提供拖動列表元素的功能。任何想法爲什麼它不工作？

Answer 1

你的HTML結構是錯誤的，內<ol>元素應該是內的<li>，後不。

<ol class="sortable"> 
    <li id="list_1"><div>A</div> 
     <ol> 
      <li id="list_2"><div>1</div></li> 
      <li id="list_3"><div>2</div></li> 
      <li id="list_4"><div>3</div></li> 
      <li id="list_5"><div>4</div></li> 
     </ol> 
    </li> 
    <li id="list_6"><div>B</div> 
     <ol> 
      <li id="list_7"><div>1</div></li> 
      <li id="list_8"><div>2</div></li> 
     </ol> 
    </li> 
</ol> 

演示：http://jsfiddle.net/ambiguous/bGuEc/

Answer 2

我認爲問題是，你的HTML標記是無效的。您必須在</ol>標籤之後結束您的</li>標籤。像這樣：

<ol class="sortable"> 
     <li id="list_1"><div>A</div> 
      <ol> 
       <li id="list_2"><div>1</div></li> 
       <li id="list_3"><div>2</div></li> 
       <li id="list_4"><div>3</div></li> 
       <li id="list_5"><div>4</div></li> 
      </ol> 
      </li> 
     <li id="list_6"><div>B</div> 
      <ol> 
       <li id="list_7"><div>1</div></li> 
       <li id="list_8"><div>2</div></li> 
      </ol> 
      </li> 
    </ol>