JSFiddle - React, Tailwind, and code Playground

by juErik

HTML

<div id="wrapper">
	<div id="origin" class="fbox">
		<img src="http://placehold.it/140x100" id="one" title="one" class="draggable" />
		<img src="http://placehold.it/150x100" id="two" title="two" class="draggable" />
		<img src="http://placehold.it/160x100" id="three" title="three" />
	</div>
  <p>test</p>
	<div id="drop" class="fbox">
   
	</div>
</div>

CSS

#origin
{
  background-color: lightgreen;
  min-width: 600px;
  min-height: 120px;
}

#origin img, #drop img {
  margin-top: 3px;
  margin-left: 5px;
}

#drop
{
  background-color: red;
  min-height: 120px;
}
.over {
  border: solid 5px purple;
}
.draggable
{
  border: solid 2px gray;
}

JavaScript

$("#origin").sortable({connectWith: "#drop"});

$("#drop").sortable({connectWith: "#origin"});