JSFiddle - React, Tailwind, and code Playground

by cmyworld

HTML

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<!DOCTYPE html>
<html>
<head>
  <link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
  <link href="http://jqueryui.com/demos/demos.css" rel="stylesheet" type="text/css" />
  <meta charset=utf-8 />
  <title>JS Bin</title>
    
  <style>
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; }
  </style>
  <style type="text/css">
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
  html>body #sortable li { height: 1.5em; line-height: 1.2em; }
  .ui-state-highlight { height: 1.5em; line-height: 1.2em; }
    #status { max-height:100px; overflow:auto; width:200px; }
  </style>
</head>
<body>
  <div class="demo">
    <ul id="sortable">
      <li class="ui-state-default">Item 1</li>
      <li class="ui-state-default">Item 2</li>
      <li class="ui-state-default">Item 3</li>
      <li class="ui-state-default">Item 4</li>
      <li class="ui-state-default">Item 5</li>
      <li class="ui-state-default">Item 6</li>
      <li class="ui-state-default">Item 7</li>
    </ul>
    
    </div><!-- End demo -->
    
    <div class="demo-description">
    
    <p>
      When dragging a sortable item to a new location, other items will make room
      for the that item by shifting to allow white space between them. Pass a
      class into the <code>placeholder</code> option to style that space to
      be visible.  Use the boolean <code>forcePlaceholderSize</code> option
      to set dimensions on the placeholder.
    </p>
    
  </div><!-- End demo-description -->
</body>
</html>

JavaScript

$(function() {
    $("#sortable").sortable({
        placeholder: 'ui-state-highlight',
        start: function(e, ui) {
            $(ui.placeholder).slideUp();
        },
        change: function(e, ui) {
            $(ui.placeholder).hide().slideDown();
        }
    });
    $("#sortable").disableSelection();
});