JSFiddle - React, Tailwind, and code Playground

by Alexandre Simoes

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<ul id="js-sortable" class="js-course-list">
  <li>
    <div class="js-active-course">
      <div class="drag-icon-box">
        <div class="drag-icon">&equiv;</div>
      </div>
      <!-- .drag-icon-box -->
      <div class="course-info">
        <p>
          <span class="bold">Catering 201</span>
        </p>
        <p>
          <input class="datepicker datepicker-trigger" type="text" value="Due: Aug 7th" readonly>
        </p>
      </div>
      <!-- .course-info -->
      <i class="fa fa-times-circle js-remove-course"></i>
      <input class="course-id" type="hidden" value="201" />
    </div>
  </li>
  <li>
    <div class="js-active-course">
      <div class="drag-icon-box">
        <div class="drag-icon">&equiv;</div>
      </div>
      <!-- .drag-icon-box -->
      <div class="course-info">
        <p>
          <span class="bold">Catering 202</span>
        </p>
        <p>
          <input class="datepicker datepicker-trigger" type="text" value="Due: Aug 7th" readonly>
        </p>
      </div>
      <!-- .course-info -->
      <i class="fa fa-times-circle js-remove-course"></i>
      <input class="course-id" type="hidden" value="202" />
    </div>
  </li>
</ul>

JavaScript

$('#js-sortable').sortable({
  handle: '.drag-icon',
  stop: function(event, ui) {
  	var itemList = $('.js-course-list li'),
    		sortOrderArray = [];

    $.each(itemList, function(idx, item) {
      sortOrderArray.push({
        'courseId': $(item).find('.course-id').val(),
        'sortOrder': idx
      });
    });

    console.log(sortOrderArray);
  }
});