我试图制作一个表格布局规划器，我搜索了高低，找到了我想要的结果，没有运气。
是否有一种简单的方法可以保存项目被丢弃的位置...那么它所处的单元格是什么？我想将它保存到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"> </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"> </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"> </td>
<td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-top: medium none #111111"> </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"> </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"> </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"> </td>
<td width="10%" align="center" style="border-style: none; border-width: medium"> </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"> </td>
<td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-top-style: none; border-top-width: medium"> </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"> </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"> </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"> </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"> </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"> </td>
<td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-bottom-style: none; border-bottom-width: medium"> </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"> </td>
<td width="10%" align="center" style="border-left-style: none; border-left-width: medium"> </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"> </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"> </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"> </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"> </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"> </td>
<td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-bottom: medium none #111111"> </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"> </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"> </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"> </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"> </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>
答案 0 :(得分：1)
首先，我将id提供给每个职位和人员。然后我在你的on drop函数中添加了几行代码，它们在jsonObj中推送了position和person的id。然后我添加了一个隐藏输入的表单，可以保存json stringify对象。按下按钮＆＃39;发送＆＃39;此信息可以发送到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"> </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"> </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"> </td>
<td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-top: medium none #111111"> </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"> </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"> </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"> </td>
<td width="10%" align="center" style="border-style: none; border-width: medium"> </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"> </td>
<td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-top-style: none; border-top-width: medium"> </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"> </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"> </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"> </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"> </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"> </td>
<td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-bottom-style: none; border-bottom-width: medium"> </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"> </td>
<td width="10%" align="center" style="border-left-style: none; border-left-width: medium"> </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"> </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"> </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"> </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"> </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"> </td>
<td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-bottom: medium none #111111"> </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"> </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"> </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"> </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"> </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/>";
}
?>