JSFiddle - React, Tailwind, and code Playground

HTML

<div id="containment-wrapper">

   <div id="logo"class="ui-widget-content" >
    <img src="http://ww1.prweb.com/prfiles/2011/06/14/8571472/ingredients_icon-kerned.jpg" alt="test"/>
   </div>

 

</div>

<div id="results"></div>
   
<form action="">
<input type="button" value="Reset" id="previousPos">
</form>

CSS

#containment-wrapper { width: 300px; height: 300px; border:2px solid #ccc; position: relative; margin: 2em auto;}

  #custombox { position: absolute; top: 50;right: 50; width: 50px; height: 50px;background: green;cursor: move; }
  
  #logo { position: absolute; top: 20px;left: 20px; width: 160px; height: 90px; padding: 0;cursor: move;}
  #logo img { position: absolute;  width: 100%; height: 100%;}
	

  #results { text-align: center; }

JavaScript

var posStack = [];
var coordinates = function(element) {
    element = $(element);
    var top = element.position().top;
    var left = element.position().left;
    $('#results').text('X: ' + left + ' ' + '   Y: ' + top);
    posStack.push({x:left,y:top});
}



$('#logo').draggable({ containment: "#containment-wrapper", scroll: false,
    		start: function() { 
        		coordinates('#logo');
    					},
   		 stop: function() {
        		//coordinates('#logo');
    				}
              
		});
 $("#logo").resizable({ containment: "#containment-wrapper", scroll: false,maxHeight: 250, maxWidth: 350, minHeight: 50, minWidth: 50 });
$("#previousPos").on('click', function(){
    var pos = posStack.pop();
   // alert(pos.x);
 $('#logo').css("left", pos.x);
     $('#logo').css("top", pos.y);
});