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

【问题标题】：Drag and Drop - save the location of where the item has been dropped in a table format拖放 - 以表格格式保存项目的放置位置
【发布时间】：2018-03-23 20:56:55
【问题描述】：

我正在尝试制作一个表格布局规划器，我已经搜索了高低以找到我想要的结果，但没有运气。

有没有一种简单的方法可以保存物品被丢弃的位置......那么它在哪个单元格中？我想把它保存到 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>

【问题讨论】：

标签： javascript jquery css mysql html

【解决方案1】：

首先，我为每个职位和人员提供了 ID。然后我在你的 on drop 函数中添加了几行代码，它将位置和人员的 id 推送到 jsonObj 中。然后我添加了一个带有隐藏输入的表单，它可以保存 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/>";
    }
?>

【讨论】：

嗨@T.Shah，代码看起来就像我需要的一样，但我遇到了一个问题，我得到一个带有错误的空结果：为 C 中的 foreach() 提供的参数无效： \wamp\www\D&D\test.php 上线.....我也改了提交的表格，对吗？
我已经弄清楚了，这太棒了！太感谢了。这是我的错误！