Question

我有多个UI，我可以在它们之间拖放li元素：

apply

让脚本在多个UI之间拖放的脚本是

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

输出类似于：

基本上我试图在数据库中保存它所包含的部分编号和讲座编号。

例如：

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

因此，当我加载它时，它按照保存的顺序加载。

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

感谢。

Answer 1

我在这里创建了DEMO。看看。

请注意：我已将id提交给<ul>和<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"/>

在同一个表中保存多个JQuery Sortable

1 个答案: