jQuery nestedSortable

Question

here의 jQuery.nestedSortable 플러그인을 사용하려고하는데 작동하지 않습니다.

웹 사이트에서 작동하지만 페이지 소스를보고 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> 

자바 스크립트 :

$('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' 
    }); 

나는이 목록의 요소를 드래그 할 수있는 기능을 제공하기에 충분해야한다 생각합니다. 왜 작동하지 않는지에 대한 아이디어가 있습니까? 귀하의 HTML 구조가 잘못

Answer 1

은 내부 <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>