JSFiddle - React, Tailwind, and code Playground

by johnsonjo4531

HTML

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="ui-sortable">
    <div class="col-header col-header-small"></div><!--
    --><div class="col-header col-header-small"></div><!--
    --><div class="col-header col-header-small"></div><!--
    --><div class="col-header col-header-small"></div><!--
    --><div class="col-header col-header-small"></div><!--
    --><div class="col-header col-header-small"></div><!--
    --><div class="col-header col-header-small"></div><!--
    --><div class="col-header col-header-small"></div><!--
    --><div class="col-header col-header-small"></div><!--
    --><div class="btn btn-blue btn-editTabsColsDisplay js-chatterAddColumn">Add Column</div>
</div>

CSS

.col-header.col-header-small {
  display: inline-block;
  width: 225px;
  vertical-align: middle;
  margin-right: 10px;
  margin-bottom: 10px;
  position: relative;
  min-height: 40px;
  background-color: #f5f5f5;
  color: #555;
  border: 1px solid #eee;
  box-sizing: border-box;
}

.col-header {
  box-sizing: border-box;
  padding: 5px 40px 5px 50px;
  /* height: 40px; */
  line-height: 40px;
  position: absolute;
  width: 100%;
}

.btn.blue:hover, .btn.blue:focus, .btn.blue:active, .btn.blue.active, .btn.blue[disabled], .btn.blue.disabled {
  background-color: #01a5ce !important;
  color: #fff !important;
}
.btn.blue {
  color: white;
  text-shadow: none;
  background-color: #00b9e8;
}
.btn:hover, .btn:focus, .btn:active, .btn.active, .btn[disabled], .btn.disabled {
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  color: #333333;
  box-shadow: none;
  background-color: #d8d8d8;
}
.btn:hover, .btn:focus {
  color: #333;
  text-decoration: none;
  background-position: 0 -15px;
  -webkit-transition: background-position .1s linear;
  -moz-transition: background-position .1s linear;
  -o-transition: background-position .1s linear;
  transition: background-position .1s linear;
}
.btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
  color: #333;
  background-color: #e6e6e6;
}
.btn-editTabsColsDisplay {
  line-height: 50px;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 10px;
}
.btn {
  background-color: #e5e5e5;
  background-image: none;
  filter: none;
  border: 0;
  box-shadow: none;
  padding: 7px 14px;
  text-shadow: none;
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #333333;
  cursor: pointer;
  outline: none;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  border-radius: 0 !important;
}
.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  text-align: center;
 ...

JavaScript

function initSortableColumnHeaders (tabData) {
    var $el = $(".ui-sortable");

    $el.sortable({
      items: ".col-header",
      distance: 5,
      //handle: ".col-header",
      create:function(ev, ui){
        // move this to when this function is called when the tab is created
        tabData.linkedElems = tabData.linkedElems || [];
        tabData.linkedElems.push($(this));
      },
      change: function (ev, ui) {
        try {
          updateCols(this, tabData);
        } catch (err) {
            // do nothing
        }
      },
      remove: function (ev, ui) {
          var id = ui.placeholder.attr("data-id");
          sortableCurrentElsObj = copyColElement(tabData, id);
          sortableCurrentCol = removeElement(tabData.columns, id)[0];
          deleteDomElements(id);
          updateCols(this, tabData);
          mongoDeleteColumn(tabData._id, id);
      },
      receive: function (ev, ui) {
          ui.item.attr("data-id", ui.placeholder.attr("data-id"));
          tabData.columns.push(sortableCurrentCol);
          var order = trimNonStrings(getDomOrder(this));
          pasteColToTab(tabData, sortableCurrentElsObj, sortableCurrentCol);
          updateCols(this, tabData, order);
          saveCols(tabData._id, tabData.columns);
      },
      start: function (ev, ui) {
        ui.placeholder.addClass("col col-placeholder");
        ui.placeholder.attr("data-id", ui.item.attr("data-id"));
        ui.item.removeAttr("data-id");
        ui.placeholder.prepend('<i class="fa fa-arrows-h largeCenterIcon"></i>');
      },
      stop: function (ev, ui) {
        // This code is merely for cleanup.
        if( firstSort ) firstSort = false;
        ui.item.attr("data-id", ui.placeholder.attr("data-id"));
        ui.placeholder.remove();
        ui.item.css({
          "position": "",
          "width": "",
          "height": "",
          "z-index": "",
          "left": "",
          "top": ""
        });
        //var colOrder =...