JSFiddle - React, Tailwind, and code Playground

by Haroldo Gondim

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="container" style="width:200px;height:200px;background-color:red">
  <div data-id="1" class="object-ui" style="width:20px;line-height:20px;border-radius:100%; background-color:blue">1</div>
  <div data-id="2" class="object-ui" style="width:20px;line-height:20px;border-radius:100%; background-color:blue">2</div>
  <div data-id="3" class="object-ui" style="width:20px;line-height:20px;border-radius:100%; background-color:blue">3</div>
  <div data-id="4" class="object-ui" style="width:20px;line-height:20px;border-radius:100%; background-color:blue">4</div>
</div>

JavaScript

$(function() {
  $(".object-ui").draggable({
    containment: '#container',
    stop: function() {
      var id = $(this).data('id');
      var left = $(this).offset().left - $('#container').offset().left;
      var top = $(this).offset().top - $('#container').offset().top;
      $.ajax({
        url: 'url',
        data: {
          'id': id,
          'left': left,
          'top': top
        },
        type: 'POST'
      }).done(function() {
        alert('Nova posição salva.');
      });
    }
  });
});