html5拖放持久

Question

我會如何做一個拖放留下我放的地方？ Im試着使用拖放設置足球場/足球場上的陣型（比賽前）

我能拖放球員在球場上，但這不是持久的課程，重新加載將重置它當然。

我將如何去使它持久？

<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> 

Answer 1

您可以使用HTML5 localstorage來存儲位置值，但HTML5沒有內置拖放元素的持久性。