JSFiddle - React, Tailwind, and code Playground

by thilakar

HTML

<div class="editTem">
<div class="editTemLeft fl">
<ul id="sortable" class="connectedSortable">

</ul>
</div>
<div class="editTemRight fl">
<ul id="sortable1" class="connectedSortable">

</ul>
</div>
</div>

<ul class="toolList">
<li class="img">Img</li>
<li>|</li>
<li class="txt">Text</li>
<li>|</li>
<li class="dTxt">Data Text</li>
</ul>

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 0; overflow:hidden;}
#innerSort li {float:left; padding:5px 0px!important; margin:5px 0px !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:30%; height:20px; display:block; background:#f6f6f6; border:dotted 1px #999;}
.idRLable {width:65%; height:20px; display:block; background:#f6f6f6; border:dotted 1px #999; margin:0px 0px 0px 10px;}
.placeHolder {background:#ccc; height:20px;}
.fl {float:left;}
.clear {clear:both}

JavaScript

$(function() {
    $('.toolList li').click(function() {
        var a = $(this).attr('class');
        
        if (a == 'img') {
            var x = '<li><span class=\"idLLable fl\"></span><span class=\"idRLable fl\"></span></li>';
            //var x = '<li id=\"FileUpload\"><label class=\"idLField fl\">Display Date:</label><div class=\"rightField fl\"><input type=\"file\" id=\"BrowserNone\" onchange=\"getElementById(\'FileField\').value = getElementById(\'BrowserNone\').value;\"/><div id=\"BrowseBlock1\"><input type=\"text\" id=\"FileField\" /></div></div>'    
            $('#sortable').append(x);
        } else if (a == 'txt') {        
            var x = '<li><ul id=\"innerSort\" class=\"connectedSortable\"><li><img src=\"images/forumImages.png\" /></li><li>&nbsp;</li><li>&nbsp;</li></li>';
            //var x = '<li><label class=\"idLField fl\">Display Date:</label><div class=\"rightField txtbg1\"><div class=\"date\"><input type=\"text\" class=\"textWidth2 required\" name=\"\"/></div></div></li>'        
            $('#sortable').append(x)                    
        } else if (a == 'dTxt') {
            var x = '<li><span class=\"idLLable fl\"></span><span class=\"idRLable fl\"></span></li>';
            //var x = '<li><label class=\"idLField fl\">Display Date:</label><div class=\"rightField txtbg1\"><div class=\"date\"><input type=\"text\" class=\"textWidth2 required\" name=\"\"/></div></div></li>'        
            $('#sortable').append(x)                                
        }
        
    });
    
    $('#sortable').sortable({
        connectWith: '.connectedSortable',
        revert: true,
        dropOnEmpty: true,
        placeholder: 'placeHolder'
    });
    $('#sortable1').sortable({
        connectWith: '.connectedSortable',
        revert: true,
        dropOnEmpty: true,
        placeholder: 'placeHolder'

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