jQuery拖放 - 将位置保存到MysQL数据库中

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>

</div>