jQuery - изменение значения атрибута после успешной перетаскивания

$(function() {
  $("#dragMe").draggable();
  $("#dropOnMe").droppable({
    drop: function(event, ui) {
      var $uiElement = $(ui.draggable), 
          id         = $uiElement.attr("id"),
          dataid     = $uiElement.attr("data-id"),
          dropid     = $(this).attr("data-id");
      console.log(id,dataid,dropid);
      $.post("someUrl",{id:id,dataid:dataid},function() {
        console.log("updated");
      });
      
      $(this)
        .addClass("ui-state-highlight")
        .find("p")
        .html(dataid+" Dropped!");
      $uiElement.attr("data-id",dropid).text("dropped on "+dropid); // set the dataid on the dragged  
    }
  });
});

#dragMe {
  width: 100px;
  height: 100px;
  padding: 0.5em;
  float: left;
  margin: 10px 10px 10px 0;
}

#dropOnMe {
  width: 150px;
  height: 150px;
  padding: 0.5em;
  float: left;
  margin: 10px;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div id="dragMe" data-id="ABCDE"  class="ui-widget-content">
  <p>Drag me to my target</p>
</div>

<div id="dropOnMe" class="ui-widget-header" data-id="DEFG">
  <p>Drop here</p>
</div>