JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<input type="button" id="reset" value="Resetar"/>
<div id="drag3"></div>
<div id="drop1"></div>

CSS

#drag3 {
  float: left;
  margin-left: 75px;
  margin-top: 25px;
  background-color: #727170;
  width: 45px;
  height: 45px;
}
#drop1 {
  float: left;
  margin-left: 20px;
  margin-top: 9px;
  width: 210px;
  height: 180px;
  float: left;
  background-position: center;
  border: 1px solid grey;
}

JavaScript

$(function() {
    // Quando o botão de resetar for clicado, a div volta automaticamente para a posição 0.
    $("#reset").click(function() {
        $("#drag3").animate({
            top:"0",
            left:"0"
        }, 1000);
    });
    
    $("#drag3").draggable({
      revert: true,
      containment: "#fundo-interno"
    });
    
    $("#drop1").droppable({
      drop: function(event, ui) {
        if (ui.draggable.attr('id') == 'drag3') {
          $("#drag3").draggable({
            revert: false,
            containment: "#fundo-interno"
          });
          $(this)
            .addClass("alterar1")
            .find("p")
          alert("Muito Bem !");
    
        } else {
          $(this)
            .find("p")
          alert("Tenta denovo !");
        }
      }
    });
});