javascript - 拖放 - 以表格格式保存元素被放置的位置

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。然后我在你的 on 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/>";
    }
?>