JSFiddle - React, Tailwind, and code Playground

by Jim_Toth

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
 
 <ul class="sort sortable">
   <li>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</li>
   <li>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</li>
</ul>
      
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="p">
  <div class="c red">
      <ul class="sortable">
        <li>1111111111</li>
        <li>2222222222</li>
        <li>3333333333</li>
        <li>4444444444</li>
        <li>5555555555</li>
        <li class="disabled sortable_last">((((Defult Red))))</li>
      </ul>
  </div>
  <div class="c green">
      <ul class="sortable">
        <li>1111111111</li>
        <li>2222222222</li>
        <li>4444444444</li>
        <li>5555555555</li>
        <li class="disabled sortable_last">((((Defult Green))))</li>
      </ul>
  </div>
  <div class="c blue">
      <ul class="sortable">
        <li>1111111111</li>
        <li>4444444444</li>
        <li class="disabled sortable_last">((((Defult Blue))))</li>
      </ul>
  </div>
    <div class="c blank">
      <ul class="sortable">
      
      </ul>
  </div>
</div>

CSS

.red{background-color:#c0392b;}
.green{background-color:#27ae60;}
.blue{background-color:#2980b9;}
.blank{background-color:#d35400;}

*{
  padding: 0;
  margin: 0;
}

.highlighted{background-color: yellow;}

body{width: 80%;margin:auto}

.p{
  position: relative;
  display: flex;
  background: black;
  height: 50px;
}

.c{
  display: inline-flex;
  align-self: flex-end;
  width: 150px;
  max-height: 50px;
  overflow: hidden;
  transition: 0.25s cubic-bezier(1,0,1,0);
  z-index: 2;
}

.c:hover{
  max-height: 999px;
}

.blank{
  position: absolute;
  height: 50px;
  width: 100%;
  z-index: 0;
  margin-left: auto;
}

ul{
  align-self: flex-end;
}

li{
  height: 50px;
  line-height: 50px;
  width: 150px;
  cursor: grab;
}

.sortable {
  min-width: 350px;
}



.c:hover .disabled{
  opacity: 0.5;
  cursor: default;
}

JavaScript

$( ".c ul, .sort" ).sortable({
    connectWith: ".blank",
    placeholder: "highlighted",
    cancel: ".disabled",
    opacity: 0.9,
		revert: 50,
		change: function(event, ui) {
			if (ui.placeholder.index() > 1) {
				$(this).siblings('.sortable_last').before(ui.placeholder);
			}
		}
}).disableSelection();