JSFiddle - React, Tailwind, and code Playground

by saluce

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<div id="reportStructureDiv" class="reportSectionBody" style="height: 479px;">
    <div id="filterColumnDiv">
        <p class="reportStructureColumnHeader">Filters</p>
        <ul id="filterColumnBlock" class="allowAvailableDrop allowFilterDrop sortable mainList">
            <li>Customer Name</li>
            <li>Car Status Expression</li>
            <li>ETA to Origin</li>
        </ul>
    </div>
    <div id="availableColumnDiv">
        <p class="reportStructureColumnHeader">Available Columns</p>
        <ul id="availableColumnBlock" class="draggable mainList">
            <li>Active Status</li>
            <li>Add Custom Values</li>
            <li>Bill Of Lading No.</li>
            <li>Business Group</li>
            <li>Car ID.</li>
            <li>Car Initials</li>
            <li>Car Number</li>
            <li>Car Status</li>
            <li>Car Status Expression</li>
            <li>CLM City</li>
            <li>CLM Date</li>
            <li>CLM Destination City</li>
            <li>CLM Destination State</li>
            <li>CLM Junction</li>
            <li>CLM State</li>
            <li>Comm Ref 1</li>
            <li>Comm Ref 2</li>
            <li>Comm Ref 3</li>
            <li>Comm Ref 4</li>
            <li>Comments</li>
            <li>Comments</li>
            <li>Commodity Code</li>
            <li>Commodity Name</li>
            <li>Commodity Short Name</li>
            <li>CSR No.</li>
            <li>Cust. Dlv. Date Time</li>
            <li>Cust. Dlv. Type</li>
            <li>Cust. Rel. Date Time</li>
            <li>Cust. Rel. Type</li>
            <li>Customer Name</li>
            <li>Customer No.</li>
            <li>Customer P.O. No.</li>
            <li>Customer Required Hours</li>
            <li>Customer Type</li>
            <li>Customer Type Description</li>
            <li>DateDiff</li>
            <li>DatePart Test</li>
            <li>Days At...

CSS

#reportStructureDiv ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.reportSectionHeader {
    padding: 0;
    margin: 0;
    display: none;
    text-align: center;
    font-size: 2em;
    background-color: LightBlue;
    cursor: pointer;
    color: Black;
}

#reportStructureDiv {
    margin-top: 3px;
    position: relative;
}

#filterColumnDiv,
#availableColumnDiv,
#displayColumnDiv,
#sortColumnDiv {
    height: 100%;
    width: 18%;
    position: relative;
    border: solid 1px #005C92;
    background-color: transparent;
    float: left;
    position: relative;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
}

#filterColumnDiv { width: 45%; }
#availableColumnDiv { left: .33%; }
#displayColumnDiv { left: .67%; }
#sortColumnDiv { left: 1%; }
      
.reportStructureColumnHeader {
    color: White;
    background: #005C92;
    display: block;
    height: 1.75em;
    font-weight: bold;
    padding: 0 0 0 7px;
    margin: 0;
}

#reportStructureDiv ul.mainList {
    background-color: White;
    position: absolute;
    top: 1.75em;
    bottom: 20px;
    left: 0;
    right: 0;
    border: solid 1px transparent;
    overflow: auto;
}

#reportStructureDiv li {
    display: block;
    padding: 0 0 0 3px;
    margin: 0;
    line-height: 1.15em;
    border: dotted 1px transparent;
}

#reportStructureDiv li:hover {
    cursor: pointer;
    background-color: #D0F8A2;
    border: dotted 1px #005C92;
}

.sortableDropTarget {
}

#availableColumnBlock,
#displayColumnBlock,
#filterColumnBlock,
#sortColumnBlock {
    margin: 0;
    padding: 0;
}

.hideOldOne { display: none !important;}

.dragListItemHighlight {
    background-color: #D0F8A2;
    border: dotted 1px #005C92;
}

.trashCan{
    position: absolute;
    bottom: 3px;
    right: 1px;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-image: url('../../Images/icons/trash_sprite.png');
}   ...

JavaScript

var ReportStructureInteractions = (function (my, $, window, undefined) {
    my.setup = function () {
        console.log("filterdrop", $("#reportStructureDiv ul.sortable.allowFilterDrop"));
        console.log("availabledrop", $("#reportStructureDiv ul.sortable.allowAvailableDrop"));
        console.log("displaydrop", $("#reportStructureDiv ul.sortable.allowDisplayDrop"));
        console.log("sortdrop", $("#reportStructureDiv ul.sortable.allowSortDrop"));
        
        $("#sortColumnBlock")
            .sortable({
                placeholder: "dragListItemHighlight",
                containment: "#reportStructureDiv",
                appendTo: "#reportStructureDiv",
                revert: 250,
                distance: 5,
                forcePlaceholderSize: true,
                forceHelperSize: true,
                tolerance: "pointer",
                helper: "clone",
                items: "li:not(.locked)",
                cancel: "li.locked",
                start: startSortable,
                stop: stopSortable,
                over: overSortable,
                beforeStop: beforeStopSortable,
                receive: receiveSortable,
                connectWith: "#reportStructureDiv ul.sortable.allowSortDrop"
        });
        
        $("#filterColumnBlock")
            .sortable({
                placeholder: "dragListItemHighlight",
                containment: "#reportStructureDiv",
                appendTo: "#reportStructureDiv",
                revert: 250,
                distance: 5,
                forcePlaceholderSize: true,
                forceHelperSize: true,
                tolerance: "pointer",
                helper: "clone",
                items: "li:not(.locked)",
                cancel: "li.locked",
                start: startSortable,
                stop: stopSortable,
                over: overSortable,
                beforeStop: beforeStopSortable,
                receive: receiveSortable,
               ...