jQuery Drag and Drop - Save positions into MysQL Database - php

Question

I have been creating a small map with different positions for a fabric. My goal is to make sure I can drag 1, 2, 3 and 4 (persons) into a position (e.g. Production Leader) and save the position of the DIV into the MySQL Database. I want a global map so each person which visit this page will see the same.
I created different DIV's for each person (1, 2, 3 and 4) which are already in the database.
I'm stuck right now.. can somebody help me?
Fiddle: https://jsfiddle.net/fj1zgw2o/
Database connection and showing persons from the database:
function choosePerson() {
$servername = "";
$username = "";
$password = "";
$dbname = "";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, name, image, position FROM Persons";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
echo '<div class="boxPersons posLeft" id="'. $row['id'] .'">'. $row['id'] .'</div>';
}
} else {
echo "0 results";
}
}

Answer 1

// Move the box into the corresponding id.
// When you load your boxPersons have each
// person an id column that matches what position they will be in.
$(".boxPersons").each(function(e){
var target = $(this).attr("data-id");
$("#"+target).append($(this));
});
$(".boxPersons").draggable({
revert: 'invalid',
containment: '.box',
cursor: 'move'
});
$(".openSpots, .box-persons").droppable({
accept: ".boxPersons",
drop: function(event, ui) {
var droppable = $(this);
var draggable = ui.draggable;
// Move draggable into droppable
draggable.appendTo(droppable);
draggable.css({
top: '0px',
left: '0px'
});
}
});
.box-content {
display: flex;
}
.toPlan {
width: 10%;
}
.overviewPlanning {
flex: 1;
}
.box-persons {
overflow: hidden;
border-radius: 4px;
border: 1px solid #d8d8d8;
}
.boxPersons {
width: 60px;
height: 72px;
padding: 5px;
margin: 10px;
text-align: center;
border: 1px solid #d8d8d8;
border-radius: 4px;
z-index: 99;
float: left;
background: #888;
}
.posLeft {
float: left;
}
.openSpots {
width: 60px;
height: 72px;
padding: 5px;
margin: 10px;
text-align: center;
border: 0.5px dashed #000000;
border-radius: 4px;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<header>
Header
</header>
<div class="box">
<div class="box-content">
<div class="toPlan">
<div class="productionLeader">
<strong>Production Leader</strong>
<div id="Leader" class="openSpots" id="openSpots">
</div>
<strong>Free</strong>
<div id="Free" class="openSpots positionFree">
</div>
<strong>Ill</strong>
<div id="Ill" class="openSpots positionIll">
</div>
<strong>Otherwise</strong>
<div id="Otherwise" class="openSpots positionOtherwise">
</div>
</div>
</div>
<div class="overviewPlanning">
Fabric map
</div>
</div>
<div class="box-persons">
Available collegues (to drag and drop into a spot)<br>When you load the data into this box change the id to match what was saved. You can use AJAX to keep everything synced.<br>
<div class="boxPersons" data-id='Free'>bob</div>
<div class="boxPersons" data-id='Ill'>marry</div>
<div class="boxPersons" data-id=''>mark</div>
</div>
</div>
<footer>
Footer
</footer>