JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mainLeft fl">
<h2 class="drTitle">Module Lists</h2>
<div class="moduleList">
<ul id="sortable1">
<li class="ui-state-default">Module 1</li>
<li class="ui-state-default">Module 2</li>
<li class="ui-state-default">Module 3</li>
<li class="ui-state-default">Module 4</li>
<li class="ui-state-default">Module 5</li>
<li class="ui-state-highlight">Module 6</li>
<li class="ui-state-highlight">Module 7</li>
<li class="ui-state-highlight">Module 8</li>
<li class="ui-state-highlight">Module 9</li>
<li class="ui-state-highlight">Module 10</li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="mainRight fl">
<h2 class="drTitle">Drag and Arrange your module from module lists</h2>
<div class="layouts">
<!--Default Layout-->
<div class="twoBlock" style="display:block;">
<div class="firstBlock fl">
<ul id="sortable2" class='dropfalse'>
</ul>
</div>
<div class="secondBlock fl">
<ul id="sortable3" class='dropfalse'>
</ul>
</div>
<div class="clear"></div>
</div>
<!--Default Layout-->

<!--Default Layout One-->
<div class="threeBlock" style="display:none;">
<div class="thLeftBlock fl">
<ul id="sortable2" class='dropfalse'>
</ul>
</div>
<div class="thMiddleBlock fl">
<ul id="sortable2" class='dropfalse'>
</ul>
</div>
<div class="thRightBlock fl">
<ul id="sortable2" class='dropfalse'>
</ul>
</div>
<div class="clear"></div>
</div>
<!--Default Layout One-->

<!--Default Layout two-->
<div class="twoBlock1" style="display:none;">
<div class="firstBlock1 fl">
<ul id="sortable2" class='dropfalse'>
</ul>
</div>
<div class="secondBlock1 fl">
<ul id="sortable3" class='droptrue'>
</ul>
</div>
<div class="clear"></div>
</div>
<!--Default Layout two-->

<!--Default Layout three-->
<div class="twoBlock2" style="display:none;">
   <div class="firstBlock2 fl">
       <ul id="sortable3" class='droptrue'>
    </ul>
   </div>
   <div class="secondBlock2 fl">
    <ul id="sortable3" class='droptrue'>
    </ul>
   </div>
   <div class="clear"></div>
</div>
<!--Default Layout...

CSS

#sortable1 { list-style-type: none; margin: 0 auto; padding: 0; float: left; background: #eee; padding: 0px; width: 100%;}
    #sortable2, #sortable3 { list-style-type: none; margin: 0 auto; padding: 0; float: left; padding: 5px; width: 95%;}
    #sortable1 li { margin: 3px auto 3px auto; padding: 5px 0px 5px 5px; font-size: 1.2em; width: 95%; border:solid 1px #ccc; background:#f6f6f6;}
    #sortable2 li, #sortable3 li {margin: 3px auto 3px auto; padding: 5px 0px 5px 5px; font-size: 1.2em; width: 95%; border:solid 1px #ccc; background:#f6f6f6; }
    .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }


.twoBlock {width:98%; height:400px; margin:0 auto;}
.firstBlock {width:49%; height:95%; margin:5px 0px 0px 0px; background:#f6f6f6; border:solid 1px #ccc;}
.secondBlock {width:49%; height:95%; margin:5px 0px 0px 8px; background:#f6f6f6; border:solid 1px #ccc; display:inline;}
.twoBlock1 {width:98%; height:400px; margin:0 auto;}
.firstBlock1 {width:19%; height:95%; margin:5px 0px 0px 0px; background:#f6f6f6; border:solid 1px #ccc;}
.secondBlock1 {width:79%; height:95%; margin:5px 0px 0px 8px; background:#f6f6f6; border:solid 1px #ccc;}
.twoBlock2 {width:98%; height:400px; margin:0 auto;}
.firstBlock2 {width:79%; height:95%; margin:5px 0px 0px 0px; background:#f6f6f6; border:solid 1px #ccc;}
.secondBlock2 {width:19%; height:95%; margin:5px 0px 0px 8px; background:#f6f6f6; border:solid 1px #ccc;}
.threeBlock {width:98%; height:400px; margin:0 auto;}
.thLeftBlock {width:19%; height:95%; margin:5px 0px 0px 0px; background:#f6f6f6; border:solid 1px #ccc;}
.thMiddleBlock {width:59%; height:95%; margin:5px 0px 0px 2px; background:#f6f6f6; border:solid 1px #ccc; display:inline;}
.thRightBlock {width:19%; height:95%; margin:5px  0px 0px 2px; background:#f6f6f6; border:solid 1px #ccc; display:inline;}
.customize {position:absolute; bottom:10px; right:10px;}
.customizeBlock {width:auto; height:auto; background:#fff;...

JavaScript

$('#sortable1 li').draggable({
        connectToSortable: ".dropfalse",
        helper: "clone",
        start: function(event, ui) {            
            var pos = $(ui.helper).position();
        }
    });

    $( ".dropfalse" ).sortable({
            connectWith: ".dropfalse",
            revert: true,
        }).disableSelection();