JSFiddle - React, Tailwind, and code Playground

HTML

<div class='map-track-box'>
    <div style='padding-top:10px;' id='draggerBox'>
     <div class='d' id='trackDragger' style='z-index:10;position:absolute;top:30px;left:20px;'></div>
     </div>
    </div>

<div class='path a-path' style='top:200px;left:20px;' id='path0'></div>
<div class='path a-path' style='top:300px;left:20px;' id='path1'></div>
<div class='path a-path' style='top:400px;left:20px;' id='path2'></div>
<div class='info'>
    Drag orange box to black box 1, then 2, then 3. Notice that snapping only occurs on black box 1   <br>
    </div>

CSS

.map-track-box { position:absolute;top:0px;left:0px;width:100px;height:90px;background-color:#E0C047; }
 .a { background-color:blue; width:50px; height:45px; }
 .b { background-color:red; width:60px; height:52px; }
 .c { background-color:green; width:61px; height:61px; }
 .d { background-color:orange; width:60px; height:52px; }
.path { position:absolute; z-index:2; }
.a-path {
    background-color:#000000;
    height:50px;
    width:100px;
}
.info { position:absolute;top:100px; }

JavaScript

$(function() {

	var trackID = "path0";
	var trackType = "a";

	$('.map-track-box').droppable({
		tolerance: 'touch',
		drop: function(event,ui){
			// RETURNS HOME
			$('#trackDragger').animate({ top: '30px', left: '20px' },500);
		}
	});

	$('#'+trackID).droppable({
		tolerance: 'touch',
		drop: function(event,ui){
			// IN POSITION
			var pos = $('#'+trackID).position();
			$('#trackDragger').animate({ top: pos.top, left: pos.left },500,function() { 
				$('#draggerBox').append("<div class='"+trackType+"' style='z-index:10;position:absolute;top:"+pos.top+"px;left:"+pos.left+"px;'></div>");
				$('#trackDragger').css({ top: '30px', left: '20px' },500);
				$('#trackDragger').attr('class', 'd');
				$('#'+trackID).removeClass('ui-droppable');
				if(trackID=="path0") {
					trackID = "path1";
				}else if(trackID=="path1") {
					trackID = "path2";
					trackType = "d";
				}else if(trackID=="path2") {
					trackID = "path3";
					trackType = "e";
				}
				$('#'+trackID).addClass('ui-droppable');
			});
		}
	});


	$('#trackDragger').draggable({
		revert: 'invalid',
		start: function(event,ui) {
			$('#trackDragger').attr('class', trackType);
		},
		snap: "#"+trackID,
		snapMode: "inner",
		stop: function(){
			var dragPos = $('#trackDragger').position();
			if(dragPos.left < 101 && dragPos.top < 91) {
				$('#trackDragger').attr('class', 'd');
			}
			//$(this).draggable('option','revert','invalid');
		}
	});


});