JSFiddle - React, Tailwind, and code Playground

by Riccal

HTML

<div id="set">
    <div data-need="1"></div>
     <div data-need="2"></div>
     <div data-need="3"></div>
     <div data-need="4"></div>
     <div data-need="5"></div>
</div>

CSS

#set div { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0;border:1px solid #000000;}
  #set { clear:both; float:left; width: 368px;}
  p { clear:both; margin:0; padding:1em 0; }

JavaScript

$(function() {
  $( "#set div" ).draggable({ 
    stack: "#set div",
      stop: function(event, ui) {
          var pos_x = ui.offset.left;
          var pos_y = ui.offset.top;
          var need = ui.helper.data("need");
          
          console.log(pos_x);
          console.log(pos_y);
          console.log(need);
          
          //Do the ajax call to the server
          $.ajax({
              type: "POST",
              url: "your_php_script.php",
              data: { x: pos_x, y: pos_y, need_id: need}
            }).done(function( msg ) {
              alert( "Data Saved: " + msg );
            }); 
      }
  });
});