<div id="btnWrapper">
    <button onclick="showPage1();">Page 1</button>
    <button onclick="showPage2();">Page 2</button>
</div>

 <div id="desp">
 <ul id="sortable">
  <li><span></span>Item 1</li>
  <li><span></span>Item 2</li>
  <li><span></span>Item 3</li>
  <li><span></span>Item 4</li>
</ul>
 </div>

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

$( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );

  function showPage1(){
    $('#desp').html(
        '<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>'+
          '<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>'+
        '</ul>'
      );
  }

    function showPage2(){
    $('#desp').html('<h3>Page 2 here...<h3>');
  }