如何在jquery中获取列表值可排序

html-

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:

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>

plz someone help me by getting the values of the list and i have to store the values in mysql through ajax and wanted it to display in the boxes in frontend. Thank You

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

2 个解决方案

#1

Here's a script which will alert you of the values, you could easily modify it to grab the values and store them in an array for your processing purposes:

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

$( "#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;
}