JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
not really used....

<div id='sort-container'>

<div class="column">
 
  <div class="portlet">
    <div class="portlet-header">Feeds</div>
    <div class="portlet-content">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 dolyy fffff hhhh dddd ff gg ddddd gggggg fffff or sit amet, Lorem ipsum dolyy fffff hhhh dddd ff gg ddddd gggggg ffffLorem ipsum dolyy fffff hhhh dddd ff gg ddddd gggggg fffff or sit amet, consectet uer adipiscing elif or sit amet, consectetuer adipiscing eli consectetuer adipiscing elit</div>
  </div>
 
</div>
 
<div class="column">
 
  <div class="portlet">
    <div class="portlet-header">Shopping</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
 
</div>
 
<div class="column">
 
  <div class="portlet">
    <div class="portlet-header">Links</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
 
  <div class="portlet">
    <div class="portlet-header">Images</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
 
</div>

</div>

- html table grid
- click an entry to select it. click a td to select it. move entry to td (re-render contents of old and new td)
- update object in array, new row/column.

CSS

div {
    box-sizing: border-box;
}

#sort-container {
    width: 900px;
    padding: 10px;
    background-color: lightblue;
    display: flex;
    justify-content: space-between;
  }
  .column {
    width: 285px;
    padding-bottom: 100px;
  }
  .portlet {
      border: 1px solid silver;
      background-color: #fff;
    margin-bottom: 10px;
    padding: 5px;
  }
  .portlet-header {
      width: 100%;
    padding: 5px;
    margin-bottom: 5px;
    position: relative;
    background-color: #eee;
  }
  .portlet-toggle {
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -10px;
    padding: 2px 8px;
    font-weight: bold;
  }
  .portlet-content {
    padding: 0.4em;
    font-size: 14px;
  }
  .portlet-placeholder {
    border: 1px dashed grey;
    margin: 0 1em 1em 0;
    height: 50px;
  }

JavaScript

$( function() {
    $( ".column" ).sortable({
      connectWith: ".column",
      handle: ".portlet-header",
      cancel: ".portlet-toggle",
      placeholder: "portlet-placeholder ui-corner-all"
    });
 
    $( ".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='portlet-toggle'>+</span>");
 
    $( ".portlet-toggle" ).on( "click", function() {
      var icon = $( this );
      //icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
      icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();
    });
  } );