JSFiddle - React, Tailwind, and code Playground

by thilakar

HTML

<div class="editTem">
<ul id="sortable" class="connectedSortable">
<li><span class="idLLable fl"></span><span class="idRLable fl"></span></li>
    <li style="" class=""><span class="idLLable fl"></span><span class="idRLable fl"></span></li>
    <li style="" class="">
        <ul id="innerSort" class="connectedSortable1">
        <li>one</li>
        <li>Two</li>
        <li>Three</li>
        </ul>
    </li>
</ul>
</div>

CSS

.editTem {width:98%; height:auto; margin:0 auto; overflow:hidden; padding:10px;}
.editTemLeft {width:47%; height:auto; margin:0px 10px 0px 0px; border:solid 1px #ccc; padding:5px}
.editTemRight {width:47%; height:auto; margin:0px;  border:solid 1px #ccc;  padding:5px}
#sortable  {padding:5px 0;}
#sortable1  {padding:5px 0;}

#sortable li {list-style-type:none; margin:10px 0px; overflow:hidden}
#sortable1 li {list-style-type:none; overflow:hidden; margin:10px 0px;}
#innerSort {padding:5px 10px; overflow:hidden;}
#innerSort li {float:left; padding:5px 0px!important; margin:5px 10px !important;}
.toolsTid {font-size:14px !important; font-weight:bold; color:#384975 !important; margin:0px 0px 0px 10px;}
.toolList {margin:5px 0px 0px 10px; padding:0px; overflow:hidden;}
.toolList li {list-style-type:none; float:left; padding:0px 5px 0px 5px; font-weight:bold; cursor:pointer;}
.idLField {width:100px;}
#BrowseBlock1 {background:transparent url(../images/browse.png) no-repeat scroll 100% 0; height:25px; left:0px; position:absolute; top:0; width:251px; z-index:1;}
.idLLable {width:20%; height:20px; display:block; background:#f6f6f6; border:dotted 1px #999;}
.idRLable {width:40%; height:20px; display:block; background:#f6f6f6; border:dotted 1px #999; margin:0px 0px 0px 10px;}
.placeHolder {background:#ccc; height:20px;}
.leftSide1 {width:10%; height:auto; padding:0px 0px 10px 0px;}
.fl {float:left}
.clear{clear:both}

JavaScript

$('#sortable').sortable({
        connectWith: '.connectedSortable',
        revert: true,
        dropOnEmpty: true,
        placeholder: 'placeHolder'
    });

    $('#sortable1').sortable({
        connectWith: '.connectedSortable',
        revert: true,
        dropOnEmpty: true,
        placeholder: 'placeHolder'

    });
        
    $('#innerSort').sortable({
        connectWith: 'ul.connectedSortable1',
         revert: true
    });
$( "#sortable, #sortable1, #innerSort" ).disableSelection();