Drag a div and on drop, save your location in the database

Question

Hello, I have the following code:

<div style="width:200px;height:200px;background-color:red">
      <div style="width:20px;line-height:20px;border-radius:100%; background-color:blue">1</div>
      <div style="width:20px;line-height:20px;border-radius:100%; background-color:blue">2</div>
      <div style="width:20px;line-height:20px;border-radius:100%; background-color:blue">3</div>
      <div style="width:20px;line-height:20px;border-radius:100%; background-color:blue">4</div>
    </div>

I would like to know how to drag these blue balls by the red frame and save x y so I can import to the database and when update the page they continue where I dragged

Thank you

Answer 1

jQuery UI offers an interaction called "Draggable", where you can drag elements through the entire window or restrict it within a specific element. Here is an example I made for you using jQuery UI and Ajax: https://jsfiddle.net/haroldogondim/ystm5umb/

To save the data using php, it would look something like:

$id = $_POST['id'];
$left = $_POST['left'];
$top = $_POST['top'];

// Exemplo usando MySQLI.
$conn = mysqli_connect("localhost", "usuario", "senha", "banco");
mysqli_query($conn, "UPDATE tabela SET coluna_left = '$left', coluna_top = '$top' WHERE id = '$id'");