JSFiddle - React, Tailwind, and code Playground

by Ajey

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div class="column">
 
    <div class="portlet">
        <div class="portlet-header">Feeds</div>
        <div class="portlet-content">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit

            Lorem ipsum dolor sit amet, consectetuer adipiscing elit
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit

            Lorem ipsum dolor sit amet, consectetuer adipiscing elit
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit
        </div>
    </div>
 
  <div class="portlet">
    <div class="portlet-header">News</div>
    <div class="portlet-content">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit

      Lorem ipsum dolor sit amet, consectetuer adipiscing elit
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit
      Lorem ipsum...

CSS

.column { width: 170px; float: left; padding-bottom: 100px; }
.portlet { margin: 0 1em 1em 0; }
.portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
.portlet-header .ui-icon { float: right; }
.portlet-content { padding: 0.4em; }
.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
.ui-sortable-placeholder * { visibility: hidden; }


body {
    min-width: 520px;
    max-height: 100vh;
    background: #FFF;
    overflow: hidden;
  }
  .column {
    width: 33%;
    float: left;
    padding-bottom: 100px;
  }
  .portlet {
    margin: 0 1em 1em 0;
    padding: 0.3em;
    height: 300px;
    overflow: scroll;

    border: none !important;
  }
  .portlet-header {
    padding: 10px;
    margin: 0 !important; 
    border-radius: 0;
    margin-bottom: 0.5em;
    position: relative;
    background: #EDF1F5;
  }
  .portlet-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -8px;
  }
  .portlet-content {
    padding: 0.4em;
    background: #EDF1F5;
    border-radius: 0;
  }
  .portlet-placeholder {
    border: 1px dotted blue;
    margin: 0 1em 1em 0;
    height: 50px;
  }

  .footer {
    position: absolute;
    bottom: 0;
    background: black;
    width: 100%;
    height: 32px;
    left: 0;
    color: white;
    text-align: center;
  }

JavaScript

$(function() {
    var beforeDiv;
     $(".column").sortable({
        connectWith: ".column",
        start: function (event, ui) {
            beforeDiv = ui.item.closest('div.column');
        },
        beforeStop: function (event, ui) {
            var afterDiv = ui.item.closest('div.column');

            beforeDiv.prepend(afterDiv.find(".portlet").not(".ui-sortable-placeholder").not(ui.item));
        }
    });
     
    $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
    .find( ".portlet-header" )
    .addClass( "ui-widget-header ui-corner-all" )
    .prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
    .end()
    .find( ".portlet-content" );
     
    $( ".portlet-header .ui-icon" ).click(function() {
        
        $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
        $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
       
    });
     
    $( ".column" ).disableSelection();
     
});