如何在jquery sortable中获取列表值答案

【问题标题】：how to get the list values in jquery sortable如何在jquery sortable中获取列表值
【发布时间】：2015-08-16 18:14:43
【问题描述】：

html-

<div class="tab_boxes">
    <ul id="sortable">
              <li class="ui-state-default sortable1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
              <li class="ui-state-default sortable1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
              <li class="ui-state-default sortable1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    </ul>
    </div>

jquery 脚本：

 <script>
$(function() {
$( "#sortable" ).sortable({
 items: "> li"
 });
 });
</script>

and 


<style>
 #sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 300px; width:300px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>

请有人通过获取列表的值来帮助我，我必须通过 ajax 将值存储在 mysql 中，并希望它显示在前端的框中。谢谢你

【问题讨论】：

标签： jquery ajax jquery-ui-sortable

【解决方案1】：

这是一个会提醒您值的脚本，您可以轻松修改它以获取值并将它们存储在数组中以供您处理：

$( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();

window.getValues = function() {
    $.each($('#sortable').find('li'), function() {
        alert($(this).text());
    });
}

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
  #sortable li span { position: absolute; margin-left: -1.3em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
</ul>
<br>
    
    <center><button type="button" onclick="getValues()">Get Lines</button></center>

【讨论】：

【解决方案2】：

$(function() {
    $(".sortable").sortable({
        update: function(event, ui) { 
            getOrder() 
        }
    });
});
function getOrder(){
    var order= $(".sortable .ui-state-default").map(function() {        
        return this.id;        
    }).get();
    console.log(order);
    f='order='+order;
    $.ajax({
        type: "POST",
        data :f,
        cache: false,
        url: "tab_box_ajax.php",

        success: function(data){
            //success
        }
    });
    return order;
}

【讨论】：