JSFiddle - React, Tailwind, and code Playground

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/140x100" id="two" title="two" class="draggable" />
		<img src="http://placehold.it/140x100" id="three" title="three" class="draggable" />
	</div>
  <p>test</p>
	<div id="drop" class="fbox">
   
	</div>
</div>

CSS

#origin
{
  background-color: green;
}
#drop
{
  background-color: red;
  min-height: 120px;
}

JavaScript

$("img").draggable({ helper: "clone", opacity: 0.5, cursor: "crosshair", scope: "drop" });
$("#drop").droppable({ accept: ".draggable", scope: "drop"});
//$("#drop").sortable();