Drag a div and drop it, save its location in the database [closed]

Question

Drag a div and drop it, save its location in the database [closed]

Navigation

#1 by (1 votes)

0

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 markers through the red frame and save the x y so that I can import into the database and when I refresh the page they continue where I dragged

Thank you

php mysql javascript html5

asked by anonymous 23.03.2018 / 19:02

1 answer

How to do a git push to bitbucket programmatically using BASH in Ubuntu16.04? My form does not send to the bank

score 1 · Accepted Answer

The jQuery UI provides an interaction called "Draggable", where you can drag elements around the window or restrict it within a specific element. Here is an example I made for you using jQuery UI and Ajax: link

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'");