JSFiddle - React, Tailwind, and code Playground

by chrisguzman

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="https://cdn.firebase.com/js/client/1.0.17/firebase.js"></script>
<ul id="sortable">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
<div id='messagesDiv'></div>

CSS

#sortable {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 60%;
  }
  #sortable li {
      margin: 0 3px 3px 3px;
      padding: 0.4em;
      padding-left: 1.5em;
      font-size: 1.4em;
      height: 18px;
  }
  #sortable li span {
      position: absolute;
      margin-left: -1.3em;
  }

JavaScript

var myDataRef = new Firebase('https://helloworldtest.firebaseio.com');

$(function thisname() {
    $("#sortable").sortable({
        axis: "y",
        update: function (event, ui) {
            var data = $('#sortable').sortable('serialize');
            myDataRef.push({
                data: data
            });
        }
    });
    $("#sortable").disableSelection();
});

var axis = $("#sortable").sortable("option", "axis");

displayChatMessage(axis);

function displayChatMessage(name) {
    $('<div/>').text(name).appendTo($('#messagesDiv'));
};