Using a sortable list as a legend control to manipulate layer order in Leaflet 1.0.0beta2

The zIndex values of various Leaflet layers can be independently manipulated by first assigning each of them to its own pane, then changing the value of the .style.zIndex for each pane. Here, a sortable list is used as a legend control that can manipulate layer order.

HTML

<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css">
<script src="http://rubaxa.github.io/Sortable/Sortable.js"></script>
<div id="map"></div>

CSS

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.dotLegend {
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: inline-block;
}

.bdotColor {
  background: #20a0ff;
}

.gdotColor {
  background: #40b060;
}

.rdotColor {
  background: #b04040;
}

.iLegend {
  width: 14px;
  height: 14px;
  display: inline-block;
}

.iColor {
  background: #ccb;
}

.sliderContainer {
  background: #fff;
}

.zSlider {
  height: 200px;
  display: inline-block;
  margin: 12px;
}

#rdotSlider .ui-slider-range {
  background: #fff;
}

#rdotSlider .ui-slider-handle {
  background: #b04040;
  border-radius: 50%;
}

#gdotSlider .ui-slider-range {
  background: #fff;
}

#gdotSlider .ui-slider-handle {
  background: #40b060;
  border-radius: 50%;
}

#bdotSlider .ui-slider-range {
  background: #fff;
}

#bdotSlider .ui-slider-handle {
  background: #20a0ff;
  border-radius: 50%;
}

#imageSlider .ui-slider-range {
  background: #fff;
}

#imageSlider .ui-slider-handle {
  background: #eed;
  border-radius: 0%;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  width: 80%;
  margin: auto;
  min-width: 1100px;
  max-width: 1300px;
  position: relative;
}

@media (min-width: 750px) and (max-width: 970px) {
  .container {
    width: 100%;
    min-width: 750px;
  }
}

.sortable-ghost {
  opacity: .2;
}

.title {
  font-size: 16px;
  font-weight: 300;
  font-family: 'Roboto', sans-serif;
  color: #fff;
  padding: 3px 10px;
  display: inline-block;
  position: relative;
  background-color: #aab;
  z-index: 1000;
}

.block__list {
  padding: 10px 0;
  max-width: 250px;
  margin-top: -8px;
  margin-left: 5px;
  background-color: #fff;
}

.block__list li {
  cursor: move;
}

.block__list_words li {
  font-size: 16px;
  font-weight: 300;
  font-family: 'Roboto', sans-serif;
  background-color: #fff;
  padding: 8px 20px;
}

.block__list_words .sortable-ghost {
  opacity: 0.4;
  background-color: #ff7;
}

.block__list_words...

JavaScript

////////////////////////////////////////////////////////////////////////////////////////////
//setting up the map//
////////////////////////////////////////////////////////////////////////////////////////////

// set center coordinates
var centerlat = 34.05;
var centerlon = -118.24;

// set default zoom level
var zoomLevel = 12;

// initialize map
var map = L.map('map').setView([centerlat, centerlon], zoomLevel);

// set source for map tiles
ATTR = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a> | ' +
'&copy; <a href="http://cartodb.com/attributions">CartoDB</a>';

CDB_URL = 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';

// add tiles to map
L.tileLayer(CDB_URL, {attribution: ATTR}).addTo(map);

////////////////////////////////////////////////////////////////////////////////////////////
//creating some GeoJSON dot clusters//
////////////////////////////////////////////////////////////////////////////////////////////

var bdotOptions = {
  count: 200,
  clusterRadius: 0.15,
  cLon: centerlon - 0.075,
  cLat: centerlat,
  nametext: 'blue_dot'
};

var gdotOptions = {
  count: 75,
  clusterRadius: 0.1,
  cLon: centerlon + 0.05,
  cLat: centerlat,
  nametext: 'green_dot'
};

var rdotOptions = {
  count: 100,
  clusterRadius: 0.1,
  cLon: centerlon,
  cLat: centerlat - 0.03,
  nametext: 'red_dot'
};

var bdots = makeDots(bdotOptions);
var gdots = makeDots(gdotOptions);
var rdots = makeDots(rdotOptions);

/////////////////////////////////////////////////////////////////////////////////////////////
//dot styles//
/////////////////////////////////////////////////////////////////////////////////////////////

//options for circle markers (**note that panes are defined here**)
var bdotStyleDefault = {
  radius: 8,
  fillColor: "#20a0ff",
  color: "#000",
  weight: 0,
  opacity: 1,
  fillOpacity: 0.9,
  pane: 'bpane'
};

var gdotStyleDefault = {
  radius: 8,
 ...