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' class='input-layout' style='width: 35%;float:right' maxlength='4' onKeyup="return checkIt(this)" ></span>	<ul><li id="29">  <button type="button" class="btn btn-xs...

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: 480px;
	cursor: move;
}
#list2 li {
	margin: 5px 5px 0 5px;
	padding:3px 3px 3px 3px;
	font-size: 0.95em;
	width: 744px;
	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,#list3 li,.drop-container li",
		over: function () {
			removeIntent = false;
			$(this).css("background-color", "green");
		},
		out: function () {
			removeIntent = true;
			$(this).css("background-color", "orange");
		},
		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", '530px').addClass("ui-state-default").height('auto');
			$(itemContext).html(preview);
			$("#list2").find("#test\\.jpg,#testimg\\.jpg,#testimg1\\.jpg").draggable({
				connectToSortable: "#list2 .drop-container,#list2",
				revert: "invalid",
				stop:function(){
				}
			});
			$("#list2 .drop-container").sortable({
				connectWith: "#list1,#list2 li",
				over: function () {
					removeIntent = false;
					$(this).css("background-color", "pink");
				},
				out: function () {
					removeIntent = true;
					$(this).css("background-color", "blue");
				},
				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 =...