sortable list - zoom

by merganser

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="div1">

  <ul id="sortable1">

  </ul>

</div>

<div id="div2">
  <ul id="nonsortable1">

  </ul>
</div>

CSS

div {
  float: left;
}

#div1 {
  height: 2000px;
  width: 400px;
}

#div2 {
  height: 200px;
  width: 400px;
  margin-left: 50px;
  overflow: scroll;
}

li {
  width: 200px;
  margin-bottom: 2px;
}

.slim {
  background-color: black;
  height: 1px;
  /* be sure to set height & width */
  width: 200px;
  /* Hide the text. */
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

JavaScript

var items = [];

console.log(localStorage);
console.log(localStorage.getItem("data"));

$(document).ready(function(){

    if (typeof(localStorage) === "undefined" || localStorage.getItem("data")==null) {
    
    console.log("need data");
    
    			$.getJSON( "https://data.consumerfinance.gov/resource/jhzv-w97w.json", 					
    			function( data ) {



              $.each( data, function( key, val ) {
                items.push( //val
                "<li id='" + key + "' class='ui-state-default'>" + val.company +" - " +val.date_sent_to_company+ "</li>" 
                );
              });
              
							if (typeof(localStorage) !== "undefined")
              {
              	//local storage support exists
              	localStorage.setItem("data", items);
              }
              
              loadpage();



    			});
        
    } else 
    {
    
    console.log("had data");
    
    		items =$(localStorage.getItem("data"));
        loadpage();
		}
});

function loadpage()
{

$('#sortable1') 
  .append(items.join("")
  );
$('#nonsortable1') 
  .append(items.join("")
  );
  		$( "#sortable1" ).sortable({
        items: "li:not(.ui-state-disabled)"
        ,start: function(event,ui){
          
          //$( "li:not('.ui-sortable-helper')" ).css( "background-color", "yellow" );
          //$( "li.ui-sortable-handle" ).css( "background-color", "yellow" );
          $( "li.ui-sortable-handle" ).addClass("slim");
          ui.item.removeClass("slim");
        } ,stop: function(event,ui){
         
         $( "li.ui-sortable-handle" ).removeClass("slim");
         
        }
      });

      $( "#sortable1 li" ).disableSelection();
var $divs = $('#div1, #div2');
var sync = function(e){
    var $other = $divs.not(this).off('scroll'), other = $other.get(0);
    var percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);
    other.scrollTop = percentage * (other.scrollHeight - other.offsetHeight);
    setTimeout( function(){...