sort list

by merganser

HTML

<h3 class="docs">Specify which items are sortable:</h3>
 
<ul id="sortable1">
  <li class="ui-state-default">Item 1</li>
  <!--<li class="ui-state-default ui-state-disabled">(I'm not sortable or a drop target)</li>
  <li class="ui-state-default ui-state-disabled">(I'm not sortable or a drop target)</li>
  <li class="ui-state-default">Item 4</li>-->
</ul>

CSS

#sortable1, { list-style-type: none; margin: 0; padding: 0; zoom: 1; }
#sortable1 li { margin: 0 5px 5px 5px; padding: 3px; width: 90%; }

JavaScript

var items=[];

$(document).ready(function(){


	fillItems();
  populateList();
  
   		$( "#sortable1" ).sortable({
        items: "li:not(.ui-state-disabled)"
      });

      $( "#sortable1 li, #sortable2 li" ).disableSelection();


});


function fillItems(){
	$.getJSON( "https://data.consumerfinance.gov/resource/jhzv-w97w.json", function( data ) {

  var items = [];
  
  $.each( data, function( key, item ) {
    items.push(item);
  });
 
  
});
}

function populateList()
{


	$('#sortable1') 
  .append(
    $(items).map(function () {
      $('<li/>') 
      .addClass('ui-state-default')
                        .html(
                        this.company
                        )
                        })
  );
	
}