JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
     <script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
     <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>
  </head>
  <body>
    <div class="existing container">
      <div class="item">item 1</div>
      <div class="item">item 2</div>
      <div class="item">item 3</div>
    </div>
    <div class="existing container">
      <div class="item">item 4</div>
      <div class="item">item 5</div>
      <div class="item">item 6</div>
    </div>
    <div class="new container">
    </div>
  </body>
</html>

CSS

html
{
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

body
{
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.container
{
  width: 100px;
  height: 500px;
  margin: 0px 10px 0px 10px;
  padding: 0px;
  float: left;
}

.existing
{
  background-color: Gray;
}

.new
{
  background-color: Green;
}

.item
{
  width: 80px;
  height: 50px;
  margin: 10px;
  padding: 0px;
  background-color: White;
}

JavaScript

var startPosition;

$( document ).ready( function ()
{
	$( ".new" ).sortable( {
		connectWith: ".container",
		update: function ( event, ui )
		{
			var newitem = $( "<div class='existing container'>" ).sortable();
			newitem.insertBefore( ".new" );

			ui.item.detach().appendTo( newitem );
		}
	} );

	$( ".existing" ).sortable( {
		connectWith: ".container"
	} ).disableSelection();
} );