JSFiddle - React, Tailwind, and code Playground

by Jim_Toth

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


<div class="ndx-headerBuilder">
            <div class="ndx-headerHead">
                <button class="ndx-editWrap">edit</button>
            </div>
            
            <div class="ndx-headerWrap">
                <div class="ndx-headerRows ndx-firstRow">
                    <button class="ndx-editRow">edit</button>
                    <div class="ndx-headerSpace left connectedSortable"></div>
                    <div class="ndx-headerSpace mid connectedSortable"></div>
                    <div class="ndx-headerSpace right connectedSortable"></div>
                </div>
                <div class="ndx-headerRows ndx-secondRow">
                    <button class="ndx-editRow">edit</button>
                    <div class="ndx-headerSpace left connectedSortable"></div>
                    <div class="ndx-headerSpace mid connectedSortable"></div>
                    <div class="ndx-headerSpace right connectedSortable"></div>
                </div>
                <div class="ndx-headerRows ndx-thirdRow">
                    <button class="ndx-editRow">edit</button>
                    <div class="ndx-headerSpace left connectedSortable"></div>
                    <div class="ndx-headerSpace mid connectedSortable"></div>
                    <div class="ndx-headerSpace right connectedSortable"></div>
                </div>
                <div class="ndx-headerRows ndx-fourthRow">
                    <button class="ndx-editRow">edit</button>
                    <div class="ndx-headerSpace left connectedSortable"></div>
                    <div class="ndx-headerSpace mid connectedSortable"></div>
                    <div class="ndx-headerSpace right connectedSortable"></div>
                </div>
            </div>
            
            <div class="ndx-headerElements">
                <ul class="ndx-headerElement connectedSortable">
                    <li...

CSS

.ndx-headerWrap {
    background-color: #fff;
    margin: 20px 0;
    padding: 10px 20px;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
}

.ndx-headerRows {
    position: relative;
    min-height: 40px;
}

.ndx-headerSpace {
    display: inline-block;
    min-height: 40px;
    width: 33%;
    margin-bottom: 5px;
    box-sizing: border-box;
    border: #7e7e7e solid 1px;
    padding: 5px;
}

.ndx-headerRows .ndx-editRow {
    position: absolute;
    left: -50px;
    display: none;
}

.ndx-headerRows .ndx-headerSpace.left {
    text-align: left;
}

.ndx-headerRows .ndx-headerSpace.mid {
    text-align: center;
}

.ndx-headerRows .ndx-headerSpace.right {
    text-align: right;
}

ul,li{
  padding: 0;
  margin: 0;
  width: 55px;
  background: gray;
}

JavaScript

$( function() {
    $( ".ndx-headerSpace , .ndx-headerElement" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
  } );