JSFiddle - React, Tailwind, and code Playground

HTML

<body id="body">
	<div id="editor">
	
		<table>
			<tr>
				<td>
		<div id="figures">

			<div id="basic">
				<!-- <img id="arrow" src="images/arrow.png" style="cursor: pointer; margin-right: 5px; margin-top: 2px;"> -->

				<div id="accordion">

					<h3>
						<a href="#">Streams</a>
					</h3>
					<div>
						<div>
							<div id="drag-list" class="drag-list">
								<ul>
									<li><span id="input" class="drag window "> <img id="arrow"
											class="shine" src="http://static.scripting.com/larryKing/images/2013/02/11/monaSmall.gif"
											style="cursor: pointer; margin-right: 5px; margin-top: 2px;">

									</span><span>Input Stream</span></li>
									
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		</td>
		<td>
		<!-- <input type="text"/ id="xax">
		<input type="text"/ id="yax"> -->
		<div style="width: 100%">
			<div id="droppable" class="droppable">
			
				<div id="text-editor"></div>
				<div id="text-editor-tools"></div>
			</div>
		</div>
		</td>
		</tr>
		
		</table>
	</div><!-- End of editor -->
	

</body>

CSS

.col {
	float: left;
	margin: 5px;
	padding: 5px;
}

#col1 {
	width: 200px;
	height: auto;
	border: 1px solid black;
}

img.drag {
	width: 40px;
	height: 40px;
	
}

#droppable {
	bottom: 0;
	height: 700px;
	overflow: scroll !important;
	border: solid 1px #ccc;
	position: relative;
    width: 500px;
}

.right {
	float: right;
}

.left {
	float: left;
}

.clear {
	clear: both;
}

ul li {
	list-style: none;
}

.drag-list img {
	width: 80px;
	vertical-align: middle;
	cursor: move;
}

.drag-list ul {
	margin: 0;
	padding: 0;
}

.drag-list li {
	margin-bottom: 5px;
}

.remove-drag-hover {
	background-color: #ED4949 !important;
}

.drop-area {
	background-color: ;/* should put the drop area color */
}

.xicon {
	margin-top: 0px;
	position: absolute;
	margin-left: -17px;
	color: #000000;
	font: message-box;
	text-decoration: none;
}

.xicon:hover {
	background-color: #fff;
	color: #000;
	width: 13px;
	height: 20px;
	text-align: center;
}

.tip {
	font-size: 12px;
	clear: both;
}

.icon {
	width: 80px;
	height: 80px;
	border-radius: 30px;
	background: red;
	float: left;
	margin: 50px;
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
}

.shine {
	background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%,
		rgba(255, 255, 255, 0.2) 100% ); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,
		255, 255, 0.7) ), color-stop(100%, rgba(255, 255, 255, 0.2) ) );
	/* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%,
		rgba(255, 255, 255, 0.2) 100% ); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%,
		rgba(255, 255, 255, 0.2) 100% ); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%,
		rgba(255, 255, 255, 0.2) 100% ); /* IE10+ */
	background: linear-gradient(top, rgba(255, 255, 255, 0.7) 0%,
		rgba(255, 255, 255, 0.2) 100% ); /* W3C */
	filter: progid : DXImageTransform.Microsoft.gradient (   startColorstr...

JavaScript

//initializing accordion
$(function() {  
    $("#accordion").accordion();  
});

//Declaring global variables
var elements = [];
var jsonElements = []; 
var jsonConnectors = []; 
var currDragId;

//counts all dragged items from pallette
var count=0;

//Storing defined streams
var definedStreams=[];

var obj = {};

	obj["streamName"] =  'StockQuotes';
	var attrList=[];
	
		var attrObj={};
		
		attrObj["AttrName"]= 'symbol';
		attrObj["AttrType"]= 'String';
		attrList.push(eval(attrObj));
		
		var attrObj={};
		
		attrObj["AttrName"]= 'price';
		attrObj["AttrType"]= 'Double';
		attrList.push(eval(attrObj));
	obj["Attributes"] = attrList;
	definedStreams.push(eval(obj));	
	
	var obj = {};
	
	obj["streamName"] =  'TwitterFeed';
	var attrList=[];
	
		var attrObj={};
		
		attrObj["AttrName"]= 'company';
		attrObj["AttrType"]= 'String';
		attrList.push(eval(attrObj));
		
		var attrObj={};
		
		attrObj["AttrName"]= 'word';
		attrObj["AttrType"]= 'String';
		attrList.push(eval(attrObj));
	obj["Attributes"] = attrList;
	definedStreams.push(eval(obj));	
	
	var obj = {};
	obj["streamName"] =  'FlightStatsStream';
	var attrList=[];
	
		var attrObj={};
		
		attrObj["AttrName"]= 'flight';
		attrObj["AttrType"]= 'String';
		attrList.push(eval(attrObj));
		
		var attrObj={};
		
		attrObj["AttrName"]= 'status';
		attrObj["AttrType"]= 'String';
		attrList.push(eval(attrObj));
	obj["Attributes"] = attrList;
	definedStreams.push(eval(obj));	

$.fn.slideFadeToggle = function(easing, callback) {
    return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);
};


$( document ).ready(function() {
	
	
	var x = null;
	//Make element draggable
	$(".drag").draggable({
	  helper: 'clone',
	  cursor: 'move',
	  tolerance: 'fit',
      stop: function (ev, ui) {
    	  
          var pos = $(ui.helper).offset();
          var dragItem=$(this).attr('id');
          objName = "#" +dragItem+ count;
        
          $(objName).removeClass("drag");
          
         ...