在同一个表中保存多个可排序的 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。看看吧。

请注意：我已将ids 给<ul>s 和<li>s

代码如下：

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"/>