Php 在同一个表中保存多个JQuery排序表

我有多个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>

这样，当我加载它时，它会按保存的顺序加载

我无法应用ajax来保存这种结构

谢谢。

我在这里创建了一个。看一看

请注意：我已将

id

s交给

s和

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

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

HTML:

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

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

课程
通过在下面创建部分、讲座和练习测验，开始整合课程。
第1节：


第三讲：测试



第1讲：测试



第二讲：测试



第2节：


第五讲：fasd



第3节：


第四讲：asdf

到底什么不起作用，或者您尝试过什么？Sortable有几种方法来收集此详细信息：

序列化

和

到阵列

，这些方法可以通过AJAX传递到脚本以保存。