how to get the list values in jquery sortable

Question

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:

 <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

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