JSFiddle - React, Tailwind, and code Playground

by saluce

HTML

<div id="reporterDiv" style="height: 1.8em; background-color: #FFCCCC; line-height: 1.8em; color: Black;"></div>
<div id="reportStructureDiv">
    <div id="filterColumnDiv">
        <p class="reportStructureColumnHeader">Filters</p>
        <ul id="filterColumnBlock" class="allowAvailableDrop" data-ui-targetclass="allowFilterDrop" data-ui-itemclass="filterColumn" data-ui-allowsort="true" data-ui-allowtrash="true">
            <li class="filterColumn dragListItem" data-value="1">List 1.1</li>
        </ul>
        <div id="filterTrashCan" class="trashCan" data-ui-associatedlist="filterColumnBlock"></div>
    </div>
    <div id="availableColumnDiv">
        <p class="reportStructureColumnHeader">Available Columns</p>
        <ul id="availableColumnBlock" data-ui-targetclass="allowAvailableDrop" data-ui-itemclass="availableColumn" data-ui-allowsort="false" data-ui-allowtrash="false" data-ui-defaulttarget="displayColumnBlock">
            <li class="availableColumn dragListItem" data-value="1" data-display="list 1.1">List 1.1</li>
            <li class="availableColumn dragListItem" data-value="2" data-display="list 1.2">List 1.2</li>
            <li class="availableColumn dragListItem" data-value="3" data-display="list 1.3">List 1.3</li>
            <li class="availableColumn dragListItem" data-value="4" data-display="list 1.4">List 1.4</li>
            <li class="availableColumn dragListItem" data-value="5" data-display="list 1.5">List 1.5</li>
            <li class="availableColumn dragListItem" data-value="6" data-display="list 1.6">List 1.6</li>
            <li class="availableColumn dragListItem" data-value="7" data-display="list 1.7">List 1.7</li>
            <li class="availableColumn dragListItem" data-value="8" data-display="list 1.8">List 1.8</li>
            <li class="availableColumn dragListItem" data-value="9" data-display="list 1.9">List 1.9</li>
            <li class="availableColumn dragListItem" data-value="10" data-display="list 1.10">List...

CSS

body {
    font-size: 11px;
    font-family: Tahoma;
}
#main {
    background-color: #F5F7F9;
}


#reportStructureDiv {
    color: Black;
}

#filterColumnDiv,
#availableColumnDiv,
#displayColumnDiv,
#sortColumnDiv {
    height: 154px;
    width: 175px;
    position: relative;
    border: solid 1px #005C92;
    float: left;
    margin-right: 4px;
}

#filterColumnDiv { width: 442px; }
#availableColumnDiv {  }
#displayColumnDiv {  }
#sortColumnDiv { margin-right: 0; }
      
.reportStructureColumnHeader {
    color: White;
    background-color: blue;
    background-repeat: repeat-x;
    display: block;
    font-weight: bold;
    padding: 0 0 0 7px;
    margin: 0;
}

#reportStructureDiv ul {
  background-color: White;
  height: 107px;
  border: solid 1px #E0EDFF;
  margin: 2px;
  overflow: auto;
}

#reportStructureDiv li {
    display: block;
    padding: 0 0 0 3px;
    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{
    float: right;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-color: #aaaaaa;
}    

.trashCan { background-color: #aaaaaa; }
.trashCanActive, .trashCan:hover { background-color: #0000ff; }
.trashCanHover, .trashCan:active { background-color: #aaaaff;  }

.inputSearchBox {
    font-size: 8pt;
    height: 9px;
    width: 70px;
    padding: 0 0 2px 2px;
    border-width: 0;
    border-bottom: solid 1px #7F9DB9;
    margin-left: 2px;
}

.availableColumnShow { color: Green; font-weight: bold; }
.availableColumnHide { color: Gray; text-decoration: line-through; }

JavaScript

/* RAILPort Sortable List Revamp */
$(function () {
    $("#reportStructureDiv ul").sortable({
        placeholder: "dragListItemHighlight",
        containment: "#reportStructureDiv",
        connectWith: "#reportStructureDiv ul",
        revert: 250,
        forcePlaceholderSize: true,
        forceHelperSize: true,
        tolerance: "pointer",
        helper: "clone",
        start: startSortable,
        stop: stopSortable,
        over: overSortable,
        out: outSortable,
        receive: receiveSortable
    });
    $("#reportStructureDiv ul").disableSelection();
    $("#reportStructureDiv ul[data-ui-defaulttarget] li").dblclick(itemDoubleClick);
});

$("document").ready(function () {
    bindMouseEvents();
});

function bindMouseEvents() {
    $("#reportStructureDiv li").unbind('mousedown', itemMouseDown);
    $("#reportStructureDiv li").unbind('mouseup', itemMouseUp);
    $("#reportStructureDiv ul[data-ui-defaulttarget] li").unbind('dblclick', itemDoubleClick);
    $("#reportStructureDiv li").mousedown(itemMouseDown);
    $("#reportStructureDiv li").mouseup(itemMouseUp);
    $("#reportStructureDiv ul[data-ui-defaulttarget] li").dblclick(itemDoubleClick);
}

function itemMouseDown (s, e) {
    var thisList = $(this).parent('ul');
    var dropTarget = "#" + $(thisList).attr("id") + ",." + $(thisList).data('ui-targetclass');
    $("#reportStructureDiv ul").not(thisList).not(dropTarget).sortable("disable");
    $(this).data('origIndex', $(this).index());
};

function itemMouseUp(s, e) {
    clearSortableDisplays();
}

function itemDoubleClick(s, e) {
    var newItemList = "#" + $(this).parent('ul').data('ui-defaulttarget');
    var oldItemList = "#" + $(this).parent('ul').attr('id');
    if ($(newItemList + " li[data-value='" + $(this).data('value') + "']").length == 0) {
        var clone = $(this).clone(true);
        $(clone).appendTo(newItemList);
        changeCloneToNewDiv(clone, oldItemList, newItemList);
        clearSortableDisplays();
   ...