JSFiddle - React, Tailwind, and code Playground

by Ankit G.

HTML

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<table id='list3' class='display compact' border='0' cellspacing='0' cellpadding='0' style='color:#000000;'>
    <thead>
        <tr>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <li id="Layout1">
                    <!--<span><a href="../../test.php?src=&w=700" class="highslide" onclick="return hs.expand(this)" ><button type="button" class="btn btn-xs btn-success">Preview</button></a></span>&nbsp;--><span>Layout1</span>
                    <!--<span style="float:right;"><input type='text' name='time1[]'  value='10' class='input-layout' style='width: 35%;float:right' maxlength='4' onKeyup="return checkIt(this)" ></span>	<ul><li id="25">  <button type="button" class="btn btn-xs btn-success" data-toggle="modal" data-target="#AddMediaModel" data-pid="0">Add Media</button>Left<ul class="drop-container" style="min-height: 100px;border:1px solid red"></ul></li><li id="26">  <button type="button" class="btn btn-xs btn-success" data-toggle="modal" data-target="#AddMediaModel" data-pid="0">Add Media</button>Right<ul class="drop-container" style="min-height: 100px;border:1px solid red"></ul></li><li id="27">  <button type="button" class="btn btn-xs btn-success" data-toggle="modal" data-target="#AddMediaModel" data-pid="0">Add Media</button>Front<ul class="drop-container" style="min-height: 100px;border:1px solid red"></ul></li></ul>-->
                </li>
            </td>
        </tr>
        <tr>
            <td>
                <li id="Layout2">
                    <!--<span><a href="../../test.php?src=&w=700" class="highslide" onclick="return hs.expand(this)" ><button type="button" class="btn btn-xs btn-success">Preview</button></a></span>&nbsp;--><span>Layout2</span>
                    <!--<span style="float:right;"><input type='text' name='time1[]'  value='10'...

CSS

#list1, #list2, #list3 {
    border:1px solid red;
}
#list1, #list2 {
    list-style-type: none;
    margin: 0;
    padding: 0 0 0;
    float: left;
    background-color:grey;
}
#list1 li, #list2 li, #list3 li {
    margin: 0px 0px 1px 0px;
    padding: 2px 0 2px 2px;
    font-size: 0.95em;
    width: 380px;
    cursor: move;
}
#list2 li {
    margin: 5px 5px 0 5px;
    padding:3px 3px 3px 3px;
    font-size: 0.95em;
    width: 359px;
    cursor: move;
    /*height:22px;*/
    display: inline-block;
    vertical-align:middle;
}

JavaScript

$(function () {
    //Radix: Added layout list
    $("#list3 li").draggable({
        connectToSortable: "#list2",
        helper: "clone",
        revert: "invalid",
		stop:function(){
		}
    });
    //Radix End
			$("#list1 li").draggable({
				connectToSortable: "#list2 .drop-container,#list2",
				helper: "clone",
				revert: "invalid",
				greedy: true
			});

    $("#list2").sortable({
        connectWith: "#list1",
        over: function () {
            removeIntent = false;
        },
        out: function () {
            removeIntent = true;
        },
        beforeStop: function (event, ui) {
            itemContext = ui.item.context;
            if (removeIntent == true) {
                ui.item.remove();
                disp($("#list2").sortable('toArray'));
            }
            //console.log(itemContext);

        },
        receive: function (event, ui) {
            console.log(ui);
            console.log(event);
            var this_id = $(ui.item).attr("id");
            var preview = $(itemContext).html().replace(/<!--/g, '').replace(/-->/g, '');

            $(itemContext).attr("id", this_id);
            $(itemContext).css("width", $('#list2').width() - 20).addClass("ui-state-default").height('auto');
            $(itemContext).html(preview);

			$("#list2 .drop-container").sortable({
				connectWith: "#list1",
				over: function () {
					removeIntent = false;
				},
				out: function () {
					removeIntent = true;
				},
				beforeStop: function (event, ui) {
					itemContext = ui.item.context;
					if (removeIntent == true) {
						ui.item.remove();
						disp($("#list2").sortable('toArray'));
					}
					//console.log(itemContext);
		
				},
				receive: function (event, ui) {
					console.log(ui);
					console.log(event);
					var this_id = $(ui.item).attr("id");
					var preview = $(itemContext).html().replace(/<!--/g, '').replace(/-->/g, '');
		
					$(itemContext).attr("id", this_id);
					$(itemContext).css("width",...