拖放 - 保存物品已放置在表格格式中的位置

Question

我试图制作表格布局规划师，我搜索了高和低来找到我想要的结果，但没有运气。

是否有一种简单的方法可以保存物品已放下的位置......那么它在哪个单元格中？我将要保存到MySQL数据库。

我已经根据这个例子的代码： https://codepen.io/praveenscience/pen/rkhxw 它运作良好。

任何帮助将会很棒！

干杯

$(document).ready(function(){ 
 
    $('li').bind('dragstart', function(event) { 
 
    event.originalEvent.dataTransfer.setData("text/plain", event.target.getAttribute('id')); 
 
    }); 
 

 
    $('ul').bind('dragover', function(event) { 
 
    event.preventDefault(); 
 
    }); 
 

 
    $('ul').bind('dragenter', function(event) { 
 
    $(this).addClass("over"); 
 
    }); 
 

 
    $('ul').bind('dragleave drop', function(event) { 
 
    $(this).removeClass("over"); 
 
    }); 
 

 
    $('li').bind('drop', function(event) { 
 
    return false; 
 
    }); 
 

 
    $('ul').bind('drop', function(event) { 
 
    var listitem = event.originalEvent.dataTransfer.getData("text/plain"); 
 
    event.target.appendChild(document.getElementById(listitem)); 
 
    event.preventDefault(); 
 
    }); 
 
});

* { 
 
    font-family: 'Segoe UI'; 
 
} 
 
li { 
 
    list-style: none; 
 
    padding: 5px; 
 
    background: #f5f5f5; 
 
    border-radius: 5px; 
 
    margin: 0 0 5px; 
 
} 
 
ul { 
 
    border: 1px solid #ccc; 
 
    border-radius: 5px; 
 
    padding: 10px; 
 
    width: 30%; 
 
    margin: 0 0.5%; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
ul.over { 
 
    padding-bottom: 55px; 
 
    background: url('http://www.cufonfonts.com/makeImage.php?width=650&id=1026&size=35&d=y&text=Drop%20Here') center bottom no-repeat #ccc; 
 
} 
 
ul.over li { 
 
    background: #fff; 
 
} 
 

 
#board div h3 {display: inline-block; width: 30%; margin: 1%; text-align: center;}

<h1>Planning board using HTML 5 Drag & Drop</h1> 
 
<div id="board"> 
 
    <div> 
 
     <h3>ToDo</h3><h3>In Progress</h3><h3>Done</h3> 
 
    </div> 
 
    <ul id="todo"> 
 
     
 
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0" bordercolor="#111111" width="600" height="500"> 
 
    <tr> 
 
    <td width="10%" align="center" style="border-left: medium none #111111; border-right-style: none; border-right-width: medium; border-top: medium none #111111; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td> 
 
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top: medium none #111111; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td> 
 
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top: medium none #111111">&nbsp;</td> 
 
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-top: medium none #111111">&nbsp;</td> 
 
    <td width="20%" colspan="2" align="center" style="border-right-style: solid; border-right-width: 1; border-top-color: #111111; border-top-width: 1" bgcolor="#3399FF"> 
 
    <font face="Calibri"><li id="item1" draggable="true">Person 1</li></font></td> 
 
    <td width="10%" align="center" style="border-right-style: none; border-right-width: medium; border-top: medium none #111111; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td> 
 
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top: medium none #111111; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td> 
 
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top: medium none #111111; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td> 
 
    <td width="10%" align="center" style="border-style: none; border-width: medium">&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td width="10%" align="center" style="border-left: medium none #111111; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium">&nbsp;</td> 
 
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-top-style: none; border-top-width: medium">&nbsp;</td> 
 
    <td width="20%" align="center" colspan="2" bgcolor="#3399FF"> 
 
    <font face="Calibri">8</font></td> 
 
    <td width="10%" align="center" style="border-left-style: solid; border-left-width: 1; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td> 
 
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: solid; border-right-width: 1; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td> 
 
    <td width="20%" align="center" colspan="2" style="border-right-style: solid; border-right-width: 1" bgcolor="#3399FF"> 
 
    <font face="Calibri">2</font></td> 
 
    <td width="10%" align="center" style="border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td> 
 
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right: medium none #111111; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td width="20%" align="center" colspan="2" style="border-left-color: #111111; border-left-width: 1" bgcolor="#3399FF"> 
 
    <font face="Calibri">7</font></td> 
 
    <td width="60%" align="center" colspan="6"><font face="Calibri">TABLE NUMBER</font></td> 
 
    <td width="20%" align="center" colspan="2" style="border-right-color: #111111; border-right-width: 1" bgcolor="#3399FF"> 
 
    <font face="Calibri">3</font></td> 
 
    </tr> 
 
    <tr> 
 
    <td width="10%" align="center" style="border-left: medium none #111111; border-right-style: none; border-right-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td> 
 
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td> 
 
    <td width="20%" align="center" colspan="2" bgcolor="#3399FF"> 
 
    <font face="Calibri">6</font></td> 
 
    <td width="10%" align="center" style="border-right-style: none; border-right-width: medium">&nbsp;</td> 
 
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium">&nbsp;</td> 
 
    <td width="20%" align="center" colspan="2" bgcolor="#3399FF"> 
 
    <font face="Calibri">4</font></td> 
 
    <td width="10%" align="center" style="border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td> 
 
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right: medium none #111111; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom: medium none #111111">&nbsp;</td> 
 
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom: medium none #111111">&nbsp;</td> 
 
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-bottom: medium none #111111">&nbsp;</td> 
 
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-bottom: medium none #111111">&nbsp;</td> 
 
    <td width="20%" align="center" colspan="2" style="border-bottom-color: #111111; border-bottom-width: 1" bgcolor="#3399FF"> 
 
    <font face="Calibri">5</font></td> 
 
    <td width="10%" align="center" style="border-right-style: none; border-right-width: medium; border-bottom: medium none #111111">&nbsp;</td> 
 
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-bottom: medium none #111111">&nbsp;</td> 
 
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom: medium none #111111">&nbsp;</td> 
 
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right: medium none #111111; border-top-style: none; border-top-width: medium; border-bottom: medium none #111111">&nbsp;</td> 
 
    </tr> 
 
</table> 
 
     <li id="item1" draggable="true">Person 2</li> 
 
     <li id="item2" draggable="true">Person 3</li> 
 
    </ul><!-- 
 
    --><ul id="inprogress"> 
 
    </ul><!-- 
 
    --><ul id="done"> 
 
    </ul> 
 
</div>

Answer 1

首先，我提供的ID到每个位置和人员。然后我在你的drop函数中添加了几行代码，它将jsonObj中的位置和人物的id推入。然后我添加了一个隐藏输入的表单，可以容纳json stringify对象。点击按钮'发送'这个信息可以发送到php文件。有json_decode获取相关信息。希望这可以帮助。

<h1>Planning board using HTML 5 Drag & Drop</h1> 
    <div id="board"> 
     <div> 
      <h3>ToDo</h3><h3>In Progress</h3><h3>Done</h3> 
     </div> 
     <ul id="todo"> 

    <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0" bordercolor="#111111" width="600" height="500"> 
     <tr> 
     <td width="10%" align="center" style="border-left: medium none #111111; border-right-style: none; border-right-width: medium; border-top: medium none #111111; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td> 
     <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top: medium none #111111; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td> 
     <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top: medium none #111111">&nbsp;</td> 
     <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-top: medium none #111111">&nbsp;</td> 
     <td id="pos1" width="20%" colspan="2" align="center" style="border-right-style: solid; border-right-width: 1; border-top-color: #111111; border-top-width: 1" bgcolor="#3399FF"> 
     <font face="Calibri">1</font></td> 
     <td width="10%" align="center" style="border-right-style: none; border-right-width: medium; border-top: medium none #111111; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td> 
     <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top: medium none #111111; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td> 
     <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top: medium none #111111; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td> 
     <td width="10%" align="center" style="border-style: none; border-width: medium">&nbsp;</td> 
     </tr> 
     <tr> 
     <td width="10%" align="center" style="border-left: medium none #111111; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium">&nbsp;</td> 
     <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-top-style: none; border-top-width: medium">&nbsp;</td> 
     <td id="pos8" width="20%" align="center" colspan="2" bgcolor="#3399FF"> 
     <font face="Calibri">8</font></td> 
     <td width="10%" align="center" style="border-left-style: solid; border-left-width: 1; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td> 
     <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: solid; border-right-width: 1; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td> 
     <td id="pos2" width="20%" align="center" colspan="2" style="border-right-style: solid; border-right-width: 1" bgcolor="#3399FF"> 
     <font face="Calibri">2</font></td> 
     <td width="10%" align="center" style="border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td> 
     <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right: medium none #111111; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td> 
     </tr> 
     <tr> 
     <td id="pos7" width="20%" align="center" colspan="2" style="border-left-color: #111111; border-left-width: 1" bgcolor="#3399FF"> 
     <font face="Calibri">7</font></td> 
     <td width="60%" align="center" colspan="6"><font face="Calibri">TABLE NUMBER</font></td> 
     <td id="pos3" width="20%" align="center" colspan="2" style="border-right-color: #111111; border-right-width: 1" bgcolor="#3399FF"> 
     <font face="Calibri">3</font></td> 
     </tr> 
     <tr> 
     <td width="10%" align="center" style="border-left: medium none #111111; border-right-style: none; border-right-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td> 
     <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td> 
     <td id="pos6" width="20%" align="center" colspan="2" bgcolor="#3399FF"> 
     <font face="Calibri">6</font></td> 
     <td width="10%" align="center" style="border-right-style: none; border-right-width: medium">&nbsp;</td> 
     <td width="10%" align="center" style="border-left-style: none; border-left-width: medium">&nbsp;</td> 
     <td id="pos4" width="20%" align="center" colspan="2" bgcolor="#3399FF"> 
     <font face="Calibri">4</font></td> 
     <td width="10%" align="center" style="border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td> 
     <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right: medium none #111111; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td> 
     </tr> 
     <tr> 
     <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom: medium none #111111">&nbsp;</td> 
     <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom: medium none #111111">&nbsp;</td> 
     <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-bottom: medium none #111111">&nbsp;</td> 
     <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-bottom: medium none #111111">&nbsp;</td> 
     <td id="pos5" width="20%" align="center" colspan="2" style="border-bottom-color: #111111; border-bottom-width: 1" bgcolor="#3399FF"> 
     <font face="Calibri">5</font></td> 
     <td width="10%" align="center" style="border-right-style: none; border-right-width: medium; border-bottom: medium none #111111">&nbsp;</td> 
     <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-bottom: medium none #111111">&nbsp;</td> 
     <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom: medium none #111111">&nbsp;</td> 
     <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right: medium none #111111; border-top-style: none; border-top-width: medium; border-bottom: medium none #111111">&nbsp;</td> 
     </tr> 
    </table> 
      <li id="item1" draggable="true">Person 1</li> 
      <li id="item2" draggable="true">Person 2</li> 
      <li id="item3" draggable="true">Person 3</li> 
      <li id="item4" draggable="true">Person 4</li> 
      <li id="item5" draggable="true">Person 5</li> 
      <li id="item6" draggable="true">Person 6</li> 
      <li id="item7" draggable="true">Person 7</li> 
      <li id="item8" draggable="true">Person 8</li> 
      <li id="item9" draggable="true">Person 9</li> 
      <li id="item10" draggable="true">Person 10</li> 
      <li id="item11" draggable="true">Person 11</li>   
     </ul><!-- 
     --><ul id="inprogress"> 
     </ul><!-- 
     --><ul id="done"> 
     </ul> 
    </div> 
    <form action="test.php" method="post" id="myForm"> 
    <input type="hidden" id="posPeople" name="posPeople" /> 
    <input id="btn" type="button" value="send" /> 
    </form> 

脚本：

<script> 
    $(document).ready(function() { 

     var jsonObj = [];    

     $('li').bind('dragstart', function(event) { 
      event.originalEvent.dataTransfer.setData("text/plain", event.target.getAttribute('id')); 
     }); 

     $('ul').bind('dragover', function(event) { 
      event.preventDefault(); 
     }); 

     $('ul').bind('dragenter', function(event) { 
      $(this).addClass("over"); 
     }); 

     $('ul').bind('dragleave drop', function(event) { 
      $(this).removeClass("over"); 
     }); 

     $('li').bind('drop', function(event) { 
      return false; 
     }); 

     $('ul').bind('drop', function(event) { 
      var listitem = event.originalEvent.dataTransfer.getData("text/plain"); 
      var el = event.target; 
      //alert(el.id); 
      //alert(document.getElementById(listitem).id); 
      event.target.appendChild(document.getElementById(listitem)); 

      var item = {}; 
      item["pos"] = el.id; 
      item["person"] = document.getElementById(listitem).id; 
      jsonObj.push(item);    

      event.preventDefault();    

     }); 

     $("#btn").on("click", function() {     
      console.log(jsonObj); 
      alert(JSON.stringify(jsonObj)); 

      $("#posPeople").val(JSON.stringify(jsonObj)); 
      $("#myForm").submit();     

     }); 

    });   

    </script> 

那么PHP可能是：

<?php 
    $json = $_POST["posPeople"]; 

    var_dump(json_decode($json, true)); 
    $data = json_decode($json, true); 

    foreach($data as $ind) { 
     echo $ind['pos'] . "<br/>"; 
     echo $ind['person'] . "<br/>"; 
    } 
?>