JSFiddle - React, Tailwind, and code Playground

by Drath

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="dialog">
  <ul id="sortable" class="sortable">
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
  </ul>
</div>

<div id="dialog2">
  <ul id="sortable2" class="sortable">
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
  </ul>
</div>

CSS

.ui-state-default {
    width: 36px;
    height: 36px;
    margin: 2px;
    background-size: 32px 32px;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 9999;
    position: relative;
    list-style: none;
    float: left;
    border: 1px #000 solid;
    background: #333;
  }
  
  .ui-dialog {
    position: absolute;
    z-index: 1;
    background-color: #999;
  }
  
  .ui-dialog-content .sortable {
    list-style-type: none;
    overflow: auto;
    height: 100%;
  }
  
  .ui-resizable {
    position: relative;
  }
  
  .ui-resizable-handle {
    position: absolute;
    font-size: 0.1px;
    display: block;
    -ms-touch-action: none;
    touch-action: none;
  }
  
  .ui-resizable-disabled .ui-resizable-handle,
  .ui-resizable-autohide .ui-resizable-handle {
    display: none;
  }
  
  .ui-resizable-n {
    height: 7px;
    top: 0;
    left: 6px;
    right: 6px;
  }
  
  .ui-resizable-s {
    height: 7px;
    bottom: 0;
    left: 6px;
    right: 6px;
  }
  
  .ui-resizable-e {
    width: 7px;
    right: 0;
    top: 6px;
    bottom: 6px;
  }
  
  .ui-resizable-w {
    width: 7px;
    left: 0;
    top: 6px;
    bottom: 6px;
  }
  
  .ui-resizable-se {
    width: 12px;
    height: 12px;
    right: 0;
    bottom: 0;
  }
  
  .ui-resizable-sw {
    width: 12px;
    height: 12px;
    left: 0;
    bottom: 0;
  }
  
  .ui-resizable-nw {
    width: 12px;
    height: 12px;
    left: 0;
    top: 0;
  }
  
  .ui-resizable-ne {
    width: 12px;
    height: 12px;
    right: 0;
    top: 0;
  }

JavaScript

$(function() {
  $("#dialog").dialog({
    position: {
      my: 'left+10 top+10',
      at: "left top"
    }
  });
  $("#sortable").sortable({
    scroll: false,
    appendTo: 'body',
    zIndex: 999999,
    connectWith: '.sortable',
    tolerance: "pointer"
  });
  $("#sortable").disableSelection();

  $("#dialog2").dialog({
    position: {
      my: 'left+140 top+140',
      at: "left top"
    }
  });
  $("#sortable2").sortable({
    scroll: false,
    appendTo: 'body',
    zIndex: 999999,
    connectWith: '.sortable',
    tolerance: "pointer"
  });
  $("#sortable2").disableSelection();
});