JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<h1>Page Title</h1>
<ul id="sortable">
  <li style="background:blue" id="model-1">Section Title 1</li>
  <li style="background:blue" id="model-2">Section Title 2</li>
  <li style="background:blue" id="model-3">Section Title 3</li>
  <li style="background:blue" id="model-4">Section Title 4</li>
  <li style="background:blue" id="model-5">Section Title 5</li>
</ul>
<a id="test" href="#">Test Button</a>

CSS

#sortable {
  margin: 1px;
  border: 1px solid #EEE;
  padding: 2px;
  list-style: none;
  width: 210px;
  background: #FFF;
}

#sortable li {
  padding: 3px;
  padding-left: 5px;
  margin: 2px;
  width: 200px;
  border-radius: 4px;
  color: #FFF;
}

JavaScript

$(function() {
  $("#test").button().click(function(e) {
    e.preventDefault();
    var serialOrder = $("#sortable").sortable("serial");
    var arrayOrder = $("#sortable").sortable("toArray");
    $.ajax({
      type: "POST",
      // used for this example
      url: "/echo/json/",
      dataType: "json",
      data: {
        json: JSON.stringify(arrayOrder)
      },
      success: function(data) {
        // Do something with the data
        console.log(data);
      }
    });
  });
  $("#sortable").sortable();
});