保存多個JQuery的可排序在同一個表

Question

我有多個UL中，我可以在它們之間拖放li元素：

<div class="outer-box"> 
    <div class="header text-center"> 
     <h4 class="title">Curriculum</h4> 
     <p class="category">Start putting together your course by creating sections, lectures and practice quizzes below.</p> 
     </div>  
     <div class="inner-box"> 
      <div class="header"> 
      <h4 class="title text-left">Section 1:</h4> 
      <div class=" header text-left">  
      <ul class="sortable ui-sortable" style="list-style-type: none;"> 


      <li class="lecture ui-sortable-handle"> 
      <p><small><span class="glyphicon glyphicon-ok" aria-hidden="true" style="color: #17AA1C;"></span> Lecture 3: Testing</small></p> 
      </li><li class="lecture ui-sortable-handle"> 
      <p><small><span class="glyphicon glyphicon-ok" aria-hidden="true" style="color: #17AA1C;"></span> Lecture 1: Testing</small></p> 
      </li><li class="lecture ui-sortable-handle"> 
      <p><small><span class="glyphicon glyphicon-ok" aria-hidden="true" style="color: #17AA1C;"></span> Lecture 2: Testing</small></p> 
      </li> 


      </ul> 
      </div> 
      </div> 
      </div> 

      <div class="inner-box"> 
      <div class="header"> 
      <h4 class="title text-left">Section 2:</h4> 
      <div class=" header text-left">  
      <ul class="sortable ui-sortable" style="list-style-type: none;"> 

      <li class="lecture ui-sortable-handle"> 
      <p><small><span class="glyphicon glyphicon-ok" aria-hidden="true" style="color: #17AA1C;"></span> Lecture 5: fasd</small></p> 
      </li> 
      </ul> 
      </div> 
      </div> 
      </div> 
     <div class="inner-box"> 
     <div class="header"> 
     <h4 class="title text-left">Section 3:</h4> 
     <div class=" header text-left">  
    <ul class="sortable ui-sortable" style="list-style-type: none;"> 

    <li class="lecture ui-sortable-handle"> 
    <p><small><span class="glyphicon glyphicon-ok" aria-hidden="true" style="color: #17AA1C;"></span> Lecture 4: asdf</small></p> 
    </li> 
</ul> 

和文字是讓它拖多個UL之間是下降

<script type="text/javascript"> 
     $('.sortable').sortable({ 
      connectWith: '.sortable', 
      revert: true 
     }); 
    </script> 

輸出是一樣的東西：

基本上我試圖在數據庫中保存它所具有的部分編號和講座編號。

例如：

section_id | lecture_id | 

1    3     
1    1    
1    2    
2    5    
3    4    

，這樣，當我加載它加載在它保存的順序。

我不能應用ajax來保存這種結構。

謝謝。

Answer 1

我在這裏創建了一個DEMO。看一看。

請注意：我給id年代到<ul> S和<li>小號

下面是代碼：

JS：

$('.sortable').sortable({ 
    connectWith: '.sortable', 
    revert: true 
}); 

$('#btn').click(function() { 
    var arr = []; 
    $.each($("ul.sortable"), function(index, value) { 
    var sortedIDs = $(this).sortable("toArray"); 
    var sectionId = $(this).attr('id'); 
    arr[index] = []; 
    arr[index]['sectionId'] = sectionId; 
    arr[index]['sortedIDs'] = sortedIDs; 
    //console.log(sortedIDs); 
    }) 
    console.log(arr); 
    alert(arr.serializeArray()) 
}); 

HTML：

<div class="outer-box"> 
    <div class="header text-center"> 
     <h4 class="title">Curriculum</h4> 
     <p class="category">Start putting together your course by creating sections, lectures and practice quizzes below.</p> 
     </div>  
     <div class="inner-box"> 
      <div class="header"> 
      <h4 class="title text-left">Section 1:</h4> 
      <div class=" header text-left">  
      <ul class="sortable ui-sortable" style="list-style-type: none;" id="sec1"> 


      <li class="lecture ui-sortable-handle" id="lec3"> 
      <p><small><span class="glyphicon glyphicon-ok" aria-hidden="true" style="color: #17AA1C;"></span> Lecture 3: Testing</small></p> 
      </li> 

      <li class="lecture ui-sortable-handle" id="lec1"> 
      <p><small><span class="glyphicon glyphicon-ok" aria-hidden="true" style="color: #17AA1C;"></span> Lecture 1: Testing</small></p> 
      </li> 

      <li class="lecture ui-sortable-handle" id="lec2"> 
      <p><small><span class="glyphicon glyphicon-ok" aria-hidden="true" style="color: #17AA1C;"></span> Lecture 2: Testing</small></p> 
      </li> 


      </ul> 
      </div> 
      </div> 
      </div> 

      <div class="inner-box"> 
      <div class="header"> 
      <h4 class="title text-left">Section 2:</h4> 
      <div class=" header text-left">  
      <ul class="sortable ui-sortable" style="list-style-type: none;" id="sec2"> 

      <li class="lecture ui-sortable-handle" id="lec5"> 
      <p><small><span class="glyphicon glyphicon-ok" aria-hidden="true" style="color: #17AA1C;"></span> Lecture 5: fasd</small></p> 
      </li> 
      </ul> 
      </div> 
      </div> 
      </div> 
     <div class="inner-box"> 
     <div class="header"> 
     <h4 class="title text-left">Section 3:</h4> 
     <div class=" header text-left">  
    <ul class="sortable ui-sortable" style="list-style-type: none;" id="sec3"> 

    <li class="lecture ui-sortable-handle" id="lec4"> 
    <p><small><span class="glyphicon glyphicon-ok" aria-hidden="true" style="color: #17AA1C;"></span> Lecture 4: asdf</small></p> 
    </li> 
</ul> 

<br><br> 
<input type="button" value="Get IDs" id="btn"/>