Javascript 拖放-以表格格式保存项目的放置位置

我正在尝试做一个表格布局规划器，我到处都在寻找我想要的结果，但运气不好

是否有一种简单的方法来保存项目被丢弃的位置…那么它在哪个单元格中？我想把它保存到MySQL数据库中

我已基于此示例编写了代码： 在那里它工作得很好

任何帮助都会很棒

干杯

$（文档）.ready（函数（）{
$（'li'）.bind（'dragstart'，函数（事件）{
event.originalEvent.dataTransfer.setData（“text/plain”，event.target.getAttribute（'id'））；
});
$（'ul'）.bind（'dragover'，函数（事件）{
event.preventDefault（）；
});
$（'ul'）.bind（'dragenter'，函数（事件）{
$（此）.addClass（“超过”）；
});
$（'ul'）.bind（'dragleave drop'，函数（事件）{
$（此）.removeClass（“结束”）；
});
$（'li'）.bind（'drop'，函数（事件）{
返回false；
});
$（'ul'）.bind（'drop'，函数（事件）{
var listitem=event.originalEvent.dataTransfer.getData（“text/plain”）；
event.target.appendChild（document.getElementById（listitem））；
event.preventDefault（）；
});
});
*{
字体系列：“SegoeUI”；
}
李{
列表样式：无；
填充物：5px；
背景:#f5；
边界半径：5px；
利润率：0.05倍；
}
保险商实验室{
边框：1px实心#ccc；
边界半径：5px；
填充：10px；
宽度：30%；
利润率：0.5%；
显示：内联块；
垂直对齐：顶部；
}
完{
填充底部：55px；
背景：url（'http://www.cufonfonts.com/makeImage.php?width=650&id=1026&size=35&d=y&text=Drop%20Here“）中底不重复#ccc；
}
李先生{
背景：#fff；
}
#board div h3{显示：内联块；宽度：30%；边距：1%；文本对齐：中心；}
使用HTML5拖放的计划板
待办事项

第1人
8.
2.
7.
表号
3.
6.
4.
5.
第二个人
第三人



首先，我向每个职位和人员提供了id。然后，我在您的on-drop函数中添加了几行代码，它在jsonObj中推送position和person的id。然后，我添加了一个带有隐藏输入的表单，它可以保存json stringify对象。点击“发送”按钮，可以将此信息发送到php文件。你可以通过解码获得相关信息。希望这有帮助

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

使用HTML5拖放的计划板
待办事项

1.
8.
2.
7.
表号
3.
6.
4.
5.
第1人
第二个人
第三人
第4人
第5人
第6人
第7人
第8人
第9人
第10人
第11人




剧本：

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


$（文档）.ready（函数（）{
var jsonObj=[]；
$（'li'）.bind（'dragstart'，函数（事件）{
event.originalEvent.dataTransfer.setData（“text/plain”，event.target.getAttribute（'id'））；
});
$（'ul'）.bind（'dragover'，函数（事件）{
event.preventDefault（）；
});
$（'ul'）.bind（'dragenter'，函数（事件）{
$（此）.addClass（“超过”）；
});
$（'ul'）.bind（'dragleave drop'，函数（事件）{
$（此）.removeClass（“结束”）；
});
$（'li'）.bind（'drop'，函数（事件）{
返回false；
});
$（'ul'）.bind（'drop'，函数（事件）{
var listitem=event.originalEvent.dataTransfer.getData（“text/plain”）；
var el=事件目标；
//警报（el.id）；
//警报（document.getElementById（listitem.id）；
event.target.appendChild（document.getElementById（listitem））；
var item={}；
项目[“位置”]=标高id；
item[“person”]=document.getElementById（listitem）.id；
jsonObj.push（项目）；
event.preventDefault（）；
});
$（“#btn”）。在（“单击”，函数（）{
console.log（jsonObj）；
警报（JSON.stringify（jsonObj））；
$（“#posPeople”）.val（JSON.stringify（jsonObj））；
$（“#我的表格”）.submit（）；
});
});         

那么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/>";
    }
?>

Hi@T.Shah，代码看起来就像我需要的一样，但我遇到了一个问题，我得到了一个空结果，但有一个错误：为C:\wamp\www\D&D\test.php中的foreach（）在线提供了无效参数…..我还更改了提交表单，