JSFiddle - React, Tailwind, and code Playground

HTML

<div class="draggable">
			<div id="draggable" class="draggable">
				<img src="http://placehold.it/100x100&text=Photo1" alt="">
			</div>
			<div id="draggable-1" class="draggable">
                <img src="http://placehold.it/100x100&text=Photo3" alt="">
			</div>
		</div>
                
        <div class="droppable left-droppable droppable-1"></div>
        <div class="droppable right-droppable"></div>

CSS

#draggable {
  position: absolute;
  left: 730px;
  top: -150px;
  height: 820px;
  overflow: hidden;
}
#draggable img {
  height: 970px;
}
.left-droppable {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.right-droppable {
  width: 20%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}
#draggable-1 {
  display: none;
  position: absolute;
  left: 730px;
  top: -150px;
  height: 820px;
  overflow: hidden;
}
#draggable-1 img {
  height: 850px;
}

JavaScript

$( "#draggable, #draggable-1" ).draggable({
		axis: "x",
		revert: true,
		scroll: false,

	});
	$( ".droppable" ).droppable({
		accept: ".draggable",
		drop: function( event, ui ) {
			optionsHide = { to: { left: -9999}};
			$('#draggable').hide( 'drop', optionsHide, 1000 );
			optionsShow = { percent: 100 };
			$('#draggable-1').show( 'scale', optionsShow, 1000 );
				$( ".droppable" ).droppable({
				accept: ".draggable",
				drop: function( event, ui ) {
					optionsHide = { to: { left: -9999}};
					$('#draggable').hide( 'drop', optionsHide, 1000 );
					optionsShow = { percent: 100 };
					$('#draggable-1').show( 'scale', optionsShow, 1000 );
				}
			});
		}
	});