html - html5ドラッグアンドドロップ永続

Question

ドラッグアンドドロップをどこに置いたままにするにはどうすればよいですか? ドラッグ アンド ドロップを使用して、サッカー/サッカー ピッチでフォーメーションをセットアップしようとしています (試合前)。

プレーヤーをピッチにドラッグ アンド ドロップすることはできますが、これは永続的ではありません。もちろん、リロードするとリセットされます。

永続化するにはどうすればよいですか？

<style type="text/css">
#maindiv {width:566px; height:800px;background-image: url('http://www.tabor-    sezana.com/football%20pitch.jpg');
background-repeat:no-repeat;position:relative;margin-left:auto;margin-right:auto;
background-size:80%;background-position:right top;}
#div1 {width:50px;height:50px;padding:10px;border:1px solid #aaaaaa; position:relative;  left:170px; top:120px;}
#div2 {width:50px;height:50px;padding:10px;border:1px solid #aaaaaa;position:relative; top:120px; left:305px; }
#div3 {width:50px;height:50px;padding:10px;border:1px solid #aaaaaa;position:relative; left:440px; top:-20px;}
#div4 {width:50px;height:50px;padding:10px;border:1px solid #aaaaaa;position:relative; left:305px; top:140px; }
#div5 {width:50px;height:50px;padding:10px;border:1px solid #aaaaaa;position:relative; left:160px; top:160px;}
#div6 {width:50px;height:50px;padding:10px;border:1px solid #aaaaaa;position:relative; left:450px; top:100px;}
#div7 {width:50px;height:50px;padding:10px;border:1px solid #aaaaaa;position:relative; left:305px; top:110px;}
</style>
<?php if ($_SESSION[rechten] >= 3 ){
?>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
 }
</script>
<?php
}
?>

<br />
<div style="width:680px;margin-left:auto;margin-right:auto;">
<?php

            $data212 = $conn->query("SELECT * FROM users where    speler='1'");
      foreach($data212 as $row) { 
     ?>
 <img id="drag<?php print_r($row[id]); ?>" src="<?php print_r($row[avatar]); ?>"     draggable="true" ondragstart="drag(event)" width="50" height="50">
<?php
}
?>
</div>
<div id="maindiv">





<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>