Sortable tile layer list in Leaflet 0.7.7

HTML

<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="map"></div>
<div id="layers" class="ui-widget-content">
  <h3>Layers</h3>
  <ul id="sortable">
    <li id="li1" class="ui-state-default">landuse</li>
    <li id="li2" class="ui-state-default">rivers</li>
    <li id="li3" class="ui-state-default">labels</li>
  </ul>
</div>

CSS

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

#map {
  width: 100%;
  height: 100%;
}

#layers {
  /*  padding: 0.1em;   */
  position: absolute;
  top: 2%;
  right: 1%;
  width: 200px;
  height: 400px;
}

#sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;
  background-color: #fff;
}

#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;
}

JavaScript

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

var listLength = $("#sortable")[0].children.length;

map = new L.Map('map', {
  maxBounds: [
    [51.90509, 19.43993],
    [51.79205, 19.78813]
  ],
  minZoom: 10,
});

map.setView([51.83713, 19.59949], 12);

var cdbAttr = '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>';
var cdbBase = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
  attribution: cdbAttr
}).addTo(map);

var landuseLayer = L.tileLayer.wms('http://92.63.57.131:8089/qgis/qgis_mapserv.fcgi.exe?map=c:/PKWL/pkwl.qgs', {
  layers: 'landuse',
  format: 'image/png',
  maxZoom: 20,
  minZoom: 10,
  transparent: true,
  continuousWorld: true,
}).addTo(map).setZIndex(listLength-$('#li1').index()+2);

var riverLayer = L.tileLayer.wms('http://92.63.57.131:8089/qgis/qgis_mapserv.fcgi.exe?map=c:/PKWL/pkwl.qgs', {
  layers: 'wodalasy',
  format: 'image/png',
  maxZoom: 20,
  minZoom: 10,
  transparent: true,
  continuousWorld: true,
}).addTo(map).setZIndex(listLength-$('#li2').index()+2);

var cdbLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
  clickable: 'false'
}).addTo(map).setZIndex(listLength-$('#li3').index()+2);

$("#sortable").on("sortupdate", function(event, ui) {
  landuseLayer.setZIndex(listLength-$('#li1').index()+2);
  riverLayer.setZIndex(listLength-$('#li2').index()+2);
  cdbLabels.setZIndex(listLength-$('#li3').index()+2);
});