JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/black-tie/jquery-ui.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/ui-lightness/jquery-ui.css">
<div class="workarea" style="border:1px solid green; width:60%; padding:0; margin:0 0 0 15px;float:left">
			<h3>Your List</h3>
			<ul id="list2" class="connectedSortable ui-sortable" style="width: 100%; min-height: 500px;">
				<li style="width: 500px;" class="ui-state-default ui-sortable-handle" id="997">
					5.jpg							
					<span class="pull-right">
						<div class="text-right hroffset">
							<a data-toggle="modal" class="preview" ><i class="fa fa fa-eye fa-2x valignmid text-green"></i></a>
							<a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
						</div>
					</span>
				</li>
				<li style="width: 500px;" class="ui-state-default ui-sortable-handle" id="998">
					6.jpg							
					<span class="pull-right">
						<div class="text-right hroffset">
							<a data-toggle="modal" class="preview"><i class="fa fa fa-eye fa-2x valignmid text-green"></i></a>
							<a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
						</div>
					</span>
				</li>
				<li class="ui-draggable ui-draggable-handle ui-state-default ui-sortable-handle" style="width: 500px; height: auto;" id="layoutdata_24_3">
					Layout4									
					<span class="pull-right">
						<div class="text-right">
							<a href="javascript:void(0)" class="deletemedia"><i class="fa fa-times fa-stack fa-inverse"></i></a>
						</div>
					</span>
					<ul class="layout_panels" style="float:left">
						<li id="119" data-layout_id="24" style="width: 481px;">
							<span...

CSS

#list1, #list2, #list3 { list-style-type: none; margin: 0; padding: 0 0 0; float: left; background-color:#CED1D6;}
#list2 li { margin: 0px 0px 1px 0px; padding: 2px 0 2px 2px;width: 395px; cursor: move; }
#list1 li{ margin: 0px 0px 1px 0px; padding: 2px 0 2px 2px;cursor: move;}
#list2 li { margin: 5px 5px 0 5px; padding:3px 3px 3px 3px; width: 595px; cursor: move;display: inline-block; vertical-align:middle; }
#list2 li{ margin: 0px 0px 1px 0px; padding: 2px 0 2px 2px;width: 595px; cursor: move; line-height: 23px;}
#list2 ul.drop-container{  padding-left: 0px;border: 1px solid #A9A9A9; background: #D3D3D3;min-height: 100px;}
#list2 ul.drop-container li{ width:575px;}
#list2 > li span.lspan{  padding: 5px;float: left;}
.layout_panels{padding-left:10px}
.layout_panels li{padding-left:10px;width: 580px;}
.widerbox{width:970px;}
.pancls{line-height: 35px;font-size: 14px;}
#list2 ul.drop-container li {border: 1px solid #A9A9A9;}
#list2 li span.tttip{text-overflow: ellipsis;	width: 65%;	overflow: hidden; white-space: nowrap;}
#list2 li span.pull-left i{display:none}
#list2{padding-bottom: 20px !important;}

JavaScript

$(function() {
    $("#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", $('#list2').width() - 20).addClass("ui-state-default").height('auto');
          $(itemContext).html(preview);

          //console.log(this_id);
          //console.log(preview);

        }
      }); 
  $("#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...