jQueryドラッグアンドドロップ - 位置をMysQLデータベースに保存

Question

私はファブリックの位置が異なる小さなマップを作成しています。私の目標は、1、2、3、4人（人）をポジション（例えばプロダクションリーダー）にドラッグし、DIVの位置をMySQLデータベースに保存できることを確認することです。私はこのページを訪問する各人が同じように見えるように、グローバルマップが欲しい。

私はすでにデータベースに入っている人（1,2,3,4人）ごとに異なるDIVを作成しました。

私は今停止しています。誰かが私を助けることができますか？

フィドル：https://jsfiddle.net/fj1zgw2o/

データベース接続やデータベースから人物を示す：@Icewineは、必ず任意のブラウザを作るために、この十分です

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>