JSFiddle - React, Tailwind, and code Playground

by nathansnider

HTML

<script src="http://rubaxa.github.io/Sortable/Sortable.js"></script>
<div class="layer block">
  <div class="layer title">Sortable Layers</div>
  <ul id="layer_list" class="block__list block__list_words">
    <li id="blue_layer">The Blue Dots</li>
    <li id="green_layer">The Green Dots</li>
    <li id="red_layer">The Red Dots</li>
    <li id="image_layer">Image Overlay</li>
  </ul>
</div>

CSS

html,
body {
  font-size: 20px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

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 {
  color: #fff;
  padding: 3px 10px;
  display: inline-block;
  position: relative;
  background-color: #FF7373;
  z-index: 1000;
}

.block {
  opacity: 1;
  position: absolute;
}

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

.block__list li {
  cursor: move;
}

.block__list_words li {
  background-color: #fff;
  padding: 10px 40px;
}

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

.block__list_words li:first-letter {
  text-transform: uppercase;
}

JavaScript

layerList = document.getElementById('layer_list');

var layArr = getIds(layerList);

Sortable.create(layerList, {
  animation: 150,
  onEnd: function(evt) {
    layArr = getIds(layerList);
    console.log(layArr);
  }
});

function getIds(inputList) {
  var outputArr = [];
  for (var i = 0; i < inputList.children.length; i++) {
    outputArr[i] = inputList.children[i].id;
  }
  return outputArr;
}