JSFiddle - React, Tailwind, and code Playground

by ryleyb

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/smoothness/jquery-ui.css">
<div class="boxContainer">
   <ul id="column1" class="connectedSortable">
      <li class="box1"></li>
      <li class="box2"></li>
      <li class="box3"></li>
   </ul>
   <ul id="column2" class="connectedSortable">
      <li class="box4"></li>
      <li class="box5"></li>
      <li class="box6"></li>
   </ul>
   <ul id="column3" class="connectedSortable">
      <li class="box7"></li>
      <li class="box8"></li>
      <li class="box9"></li>
   </ul>
</div>

CSS

.boxContainer
{
    margin:0px;
    width:1100px;
    height:auto;}

#column1, #column2, #column3 { 
    list-style-type: none;
    margin:0 10px 0 0px;
    float:left;
    height:auto;
    width:100px;
}

#column1 li, #column2 li, #column3 li { 
    height:auto;
    width:100px;}

.box1, .box4, .box9 {
    background-color:red;
}

JavaScript

$("ul.connectedSortable").sortable({
    connectWith:'.connectedSortable', 
    placeholder: 'ui-state-highlight',
    forcePlaceholderSize:true
}).disableSelection();


$('li').each(function(){
   $(this).text($(this).attr('class')); 
});

$('.box1, .box4, .box9').append('<div style="height:150px;"></div>');