JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<div id="draggable2">
</div>

<div id="draggable"></div>

<div id="droppable"></div>

<div id="droppable2"></div>

CSS

#droppable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; background-color: red;}
#droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; background-color: blue; }
#draggable, #draggable2 { width: 100px; height: 100px; border-radius: 50%; padding: 0.5em; float: left; margin: 10px 10px 10px 0; border: 1px solid black; }
#draggable { background-color: red; }
#draggable2 { background-color: blue; }

JavaScript

$("#draggable, #draggable2").draggable({ revert: 'invalid', snap: "#droppable2" });

$("#droppable").droppable({
    accept: '#draggable'
});

$("#droppable2").droppable({
    accept: '#draggable2',
});