JSFiddle - React, Tailwind, and code Playground

by jecker

HTML

<div style="text-align:center;">
    <div class="inlineBlock moveFldr" style="text-align:left;">
        <div id="C1" class="moveFldr lnkItems" data-cid="1" style="padding-left:30px;">
            <div id="F1" class="fldrIcon contextMenu moveFldr">. Procedures for Approving Foreign Suppliers</div>
            <div id="C2" class="moveFldr lnkItems " data-cid="2" style="padding-left:30px;">
                <div id="F2" class="fldrIcon contextMenu moveFldr">. Performance of Verification Activates</div>
                <div id="L101" class="upDoc moveFile  fileIcon2 hideFile" style="margin-left: 15px;">Document</div>
                <div id="C3" class="moveFldr lnkItems " data-cid="3" style="padding-left:30px;">
                    <div id="F3" class="fldrIcon contextMenu moveFldr">. Verification Documents</div>
                    <div id="C4" class="moveFldr lnkItems " data-cid="4" style="padding-left:30px;">
                        <div id="F4" class="fldrIcon contextMenu moveFldr">. Performance Evaluation</div>
                    </div>
                    <div id="C5" class="moveFldr lnkItems " data-cid="5" style="padding-left:30px;">
                        <div id="F5" class="fldrIcon contextMenu moveFldr">. QI Verification Reports</div>
                    </div>
                    <div id="C6" class="moveFldr lnkItems " data-cid="6" style="padding-left:30px;">
                        <div id="F6" class="fldrIcon contextMenu moveFldr">. Water Testing</div>
                    <div id="C19" class="moveFldr lnkItems " data-cid="19" style="padding-left:30px;">
                        <div id="F19" class="fldrIcon contextMenu moveFldr">. 2022-2023</div>
                    </div>
                    <div id="C20" class="moveFldr lnkItems " data-cid="20" style="padding-left:30px;">
                        <div id="F20" class="fldrIcon contextMenu moveFldr">. 2023-2024</div>
                    </div>
                    <div id="C21" class="moveFldr lnkItems ">
...

CSS

.fldrIcon:before {
    cursor: pointer;
    content: counter(folders);
}
         
.voidDoc {
    text-decoration: line-through;
    text-decoration-color: red;
}

#voidDoc { 
     background-color:#FFF;
     border-radius:5px;
     color:#000;
     display:none; 
     padding:5px;
     min-width:400px;
     min-height: 130px;
}
         
.voidedDoc, .newDoc, .oldDoc {
    text-decoration: none !important;
}
         
.placeHolder {
    border-style: dashed;
    border-color: #000;
    height: 15px;
}

.grnDot, .redDot, .ylwDot {
    height: 10px;
    width: 20px;
    border-color: #000;
    border-style: solid;
    border-width: 1px;
    border-radius: 50%;
    font-size: 10px;
    display:inline-block;
    text-align: center;
    padding-bottom: 10px;
}
         
.subFixField {
    font-weight: 700;
}
         
.fixField {
    text-align:center;
}
         
.grnDot {
    background-color: #5efc03;
    color: #000;
}
         
.redDot {
    background-color: #FF0000;
    color: #FFF;
}
         
.ylwDot {
    background-color: #ffff00;
    color: #000;
}

.fldrIcon {
    counter-increment: folders;
}

JavaScript

$(document).ready(function () { 
    $(".moveFldr").sortable({
        connectWith: "div.moveFldr :not(.fldrIcon) :not(span)",
        placeholder: "placeHolder",
        cancel: ".fldrIcon, .voidDoc",
    });

    $(".fldrIcon").sortable("disable");
});