Переносимый элемент смещается относительно курсора

$(function() {
  $(".drag").draggable({
    revert: "invalid",
    revertDuration: 100,
    cursor: "move",
    start: function(event, ui) {
      $(".drag").after('<div class="drop">Drop</div>');
    },
    stop: function(event, ui) {
      $(".drop").remove();
    }
  })
});

#content {
  width: 100%;
  height: 500px;
}

.drag {
  width: 50px;
  height: 50px;
  border: 1px solid;
  display: inline-block;
  vertical-align: center;
  margin-right: 10px;
}
.drop {
   width: 50px;
  height: 50px;
  border: 1px solid red;
  display: inline-block;
  vertical-align: center;
  margin-right: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="content">
  <div class="drag">Drag</div>
  <div class="drag">Drag</div>
  <div class="drag">Drag</div>
</div>