我有一个html文档，发布到PHP，后来发布到CSV。我希望能够将选择从右侧拖动到左侧的输入字段中，并让它存储与之关联的值。 1 2 3 4等....然后提交按照它被拖动的顺序发送数据这是我的HTML到目前为止。如果我手动将数字输入到框中，但是如果我拖动它，则永远不会将数据值移动到输入字段。
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<style>
body{
background-color: black;
}
table{
color: white;
text-align: center;
border-collapse: collapse;
width: 100%;
padding: 4px;
}
th {
font-size: 28px;
color: white;
width: 20%;
text-align: right;
padding: 20px;
}
td {
font-size: 20px;
}
input {
width: 150px;
height: 25px;
padding: 5px;
font-size: 15px;
border-radius: 25px;
box-shadow: 2px 2px orange;
border: 1px solid #aaaaaa;
text-align: center;
}
filedrag.hover {
color: #f00;
border-color: #f00;
border-style: solid;
box-shadow: inset 0 3px 4px #888;
}
</style>
<script>
function dragover_handler(ev) {
ev.preventDefault();
ev.dataTransfer.dropEffect = "move";
}
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransferItem.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransferItem.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<head>
<title>Shift bid 2018</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form method="POST" action="collect.php">
<table>
<tr>
<th>Rank your selection</th>
<th></th>
<th></th>
<th>shifts</th>
<th></th>
</tr>
<tr>
<td align="left"><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ondragover="dragover_handler(event)">01.<input type="number" name="choice:1"></div></td>
<td align="center"><div id="div26" ondrop="drop(event)" ondragover="allowDrop(event)">26.<input type="number" name="choice:26"></div></td>
<td align="center"><div id="div1M"></div></td>
<td align="left"><div id="div1A" ondragstart="drag(event)" draggable="true">1. Su-TR 1:30-22:30</div></td>
<td align="left"><div id="div26A" ondragstart="drag(event)" draggable="true">26. Su-TR 1:30-22:30</div></td>
</tr>
<tr>
<td align="left"><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">02.<input type="number" name="choice:2"></div></td>
<td align="center"><div id="div27" ondrop="drop(event)" ondragover="allowDrop(event)">27.<input type="number" name="choice:27"></div></td>
<td align="center"><div id="div2M"></div></td>
<td align="left"><div id="div2A" ondragstart="drag(event)" draggable="true">2. M-F 1:30-22:30</div></td>
<td align="left"><div id="div27A" ondragstart="drag(event)" draggable="true">27. Su-TR 1:30-22:30</div></td>
</tr>
<tr>
<td align="left"><div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">03.<input type="number" name="choice:3"></div></td>
<td align="center"><div id="div28" ondrop="drop(event)" ondragover="allowDrop(event)">28.<input type="number" name="choice:28"></div></td>
<td align="center"><div id="div3M"></div></td>
<td align="left"><div id="div3A" ondrop="drop(event)" draggable="true">3. Tu-Sa 1:30-22:30</div></td>
<td align="left"><div id="div28A" ondrop="drop(event)" draggable="true">28. Su-TR 1:30-22:30</div></td>
</tr>
<tr>
<td align="left"><div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)">04.<input type="number" name="choice:4"></div></td>
<td align="center"><div id="div29" ondrop="drop(event)" ondragover="allowDrop(event)">29.<input type="number" name="choice:29"></div></td>
<td align="center"><div id="div4M"></div></td>
<td align="left"><div id="div4A" ondrop="drop(event)" draggable="true">4. W-Su 1:30-22:30</div></td>
<td align="left"><div id="div29A" ondrop="drop(event)" draggable="true">29. Su-TR 1:30-22:30</div></td>
</tr>
<tr>
<td align="left"><div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)">05.<input type="number" name="choice:5"></div></td>
<td align="center"><div id="div30" ondrop="drop(event)" ondragover="allowDrop(event)">30.<input type="number" name="choice:30"></div></td>
<td align="center"><div id="div5M"></div></td>
<td align="left"><div id="div5A" ondrop="drop(event)" draggable="true">5. Tr-M 1:30-22:30</div></td>
<td align="left"><div id="div30A" ondrop="drop(event)" draggable="true">30. Su-TR 1:30-22:30</div></td>
</tr>
<tr>
<td align="left"><div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)">06.<input type="number" name="choice:6"></div></td>
<td align="center"><div id="div31" ondrop="drop(event)" ondragover="allowDrop(event)">31.<input type="number" name="choice:31"></div></td>
<td align="center"><div id="div6M"></div></td>
<td align="left"><div id="div6A" ondrop="drop(event)" draggable="true">6. F-Tu 1:30-22:30</div></td>
<td align="left"><div id="div31A" ondrop="drop(event)" draggable="true">31. Su-TR 1:30-22:30</div></td>
</tr>
<tr>
<td align="left"><div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)">07.<input type="number" name="choice:7"></div></td>
<td align="center"><div id="div32" ondrop="drop(event)" ondragover="allowDrop(event)">32.<input type="number" name="choice:32"></div></td>
<td align="center"><div id="div7M"></div></td>
<td align="left"><div id="div7A" ondrop="drop(event)" draggable="true">7. Sa-W 1:30-22:30</div></td>
<td align="left"><div id="div32A" ondrop="drop(event)" draggable="true">32. Su-TR 1:30-22:30</div></td>
</tr>
<tr>
<td align="left"><div id="div8" ondrop="drop(event)" ondragover="allowDrop(event)">08.<input type="number" name="choice:8"></div></td>
<td align="center"><div id="div33" ondrop="drop(event)" ondragover="allowDrop(event)">33.<input type="number" name="choice:33"></div></td>
<td align="center"><div id="div8M"></div></td>
<td align="left"><div id="div8A" ondrop="drop(event)" draggable="true">8. Sa-W 1:30-22:30</div></td>
<td align="left"><div id="div33A" ondrop="drop(event)" draggable="true">33. Su-TR 1:30-22:30</div></td>
</tr>
<tr>
<td align="left"><div id="div9" ondrop="drop(event)" ondragover="allowDrop(event)">09.<input type="number" name="choice:9"></div></td>
<td align="center"><div id="div34" ondrop="drop(event)" ondragover="allowDrop(event)">34.<input type="number" name="choice:34"></div></td>
<td align="center"><div id="div9M"></div></td>
<td align="left"><div id="div9A" ondrop="drop(event)" draggable="true">9. Sa-W 1:30-22:30</div></td>
<td align="left"><div id="div34A" ondrop="drop(event)" draggable="true">34. Su-TR 1:30-22:30</div></td>
</tr>
<tr>
<td align="left"><div id="div10" ondrop="drop(event)" ondragover="allowDrop(event)">10.<input type="number" name="choice:10"></div></td>
<td align="center"><div id="div35" ondrop="drop(event)" ondragover="allowDrop(event)">35.<input type="number" name="choice:35"></div></td>
<td align="center"><div id="div10M"></div></td>
<td align="left"><div id="div10A" ondrop="drop(event)" draggable="true">10. Sa-W 1:30-22:30</div></td>
<td align="left"><div id="div35A" ondrop="drop(event)" draggable="true">35. Su-TR 1:30-22:30</div></td>
</tr>
<tr>
<td align="left"><div id="div11" ondrop="drop(event)" ondragover="allowDrop(event)">11.<input type="number" name="choice:11"></div></td>
<td align="center"><div id="div36" ondrop="drop(event)" ondragover="allowDrop(event)">36.<input type="number" name="choice:36"></div></td>
<td align="center"><div id="div11M"></div></td>
<td align="left"><div id="div11A" ondrop="drop(event)" draggable="true">11. Sa-W 1:30-22:30</div></td>
<td align="left"><div id="div36A" ondrop="drop(event)" draggable="true">36. Su-TR 1:30-22:30</div></td>
</tr><tr>
<td align="left"><div id="div12" ondrop="drop(event)" ondragover="allowDrop(event)">12.<input type="number" name="choice:12"></div></td>
<td align="center"><div id="div37" ondrop="drop(event)" ondragover="allowDrop(event)">37.<input type="number" name="choice:37"></div></td>
<td align="center"><div id="div12M"></div></td>
<td align="left"><div id="div12A" ondrop="drop(event)" draggable="true">12. Sa-W 1:30-22:30</div></td>
<td align="left"><div id="div37A" ondrop="drop(event)" draggable="true">37. Su-TR 1:30-22:30</div></td>
</tr>
<tr>
<td align="left"><div id="div13" ondrop="drop(event)" ondragover="allowDrop(event)">13.<input type="number" name="choice:13"></div></td>
<td align="center"><div id="div38" ondrop="drop(event)" ondragover="allowDrop(event)">38.<input type="number" name="choice:38"></div></td>
<td align="center"><div id="div13M"></div></td>
<td align="left"><div id="div13A" ondrop="drop(event)" draggable="true">13. Sa-W 1:30-22:30</div></td>
<td align="left"><div id="div38A" ondrop="drop(event)" draggable="true">38. Su-TR 1:30-22:30</div></td>
</tr><tr>
<td align="left"><div id="div14" ondrop="drop(event)" ondragover="allowDrop(event)">14.<input type="number" name="choice:14"></div></td>
<td align="center"><div id="div39" ondrop="drop(event)" ondragover="allowDrop(event)">39.<input type="number" name="choice:39"></div></td>
<td align="center"><div id="div14M"></div></td>
<td align="left"><div id="div14A" ondrop="drop(event)" draggable="true">14. Sa-W 1:30-22:30</div></td>
<td align="left"><div id="div39A" ondrop="drop(event)" draggable="true">39. Su-TR 1:30-22:30</div></td>
</tr><tr>
<td align="left"><div id="div15" ondrop="drop(event)" ondragover="allowDrop(event)">15.<input type="number" name="choice:15"></div></td>
<td align="center"><div id="div40" ondrop="drop(event)" ondragover="allowDrop(event)">40.<input type="number" name="choice:40"></div></td>
<td align="center"><div id="div15M"></div></td>
<td align="left"><div id="div15A" ondrop="drop(event)" draggable="true">15. Sa-W 1:30-22:30</div></td>
<td align="left"><div id="div40A" ondrop="drop(event)" draggable="true">40. Su-TR 1:30-22:30</div></td>
</tr><tr>
<td align="left"><div id="div16" ondrop="drop(event)" ondragover="allowDrop(event)">16.<input type="number" name="choice:16"></div></td>
<td align="center"><div id="div41" ondrop="drop(event)" ondragover="allowDrop(event)">41.<input type="number" name="choice:41"></div></td>
<td align="center"><div id="div16M"></div></td>
<td align="left"><div id="div16A" ondrop="drop(event)" draggable="true">16. Sa-W 1:30-22:30</div></td>
<td align="left"><div id="div41A" ondrop="drop(event)" draggable="true">41. Su-TR 1:30-22:30</div></td>
</tr><tr>
<td align="left"><div id="div17" ondrop="drop(event)" ondragover="allowDrop(event)">17.<input type="number" name="choice:17"></div></td>
<td align="center"><div id="div42" ondrop="drop(event)" ondragover="allowDrop(event)">42.<input type="number" name="choice:42"></div></td>
<td align="center"><div id="div17M"></div></td>
<td align="left"><div id="div17A" ondrop="drop(event)" draggable="true">17. Sa-W 1:30-22:30</div></td>
<td align="left"><div id="div42A" ondrop="drop(event)" draggable="true">42. Su-TR 1:30-22:30</div></td>
</tr>
<tr>
<td align="left"><div id="div18" ondrop="drop(event)" ondragover="allowDrop(event)">18.<input type="number" name="choice:18"></div></td>
<td align="center"><div id="div43" ondrop="drop(event)" ondragover="allowDrop(event)">43.<input type="number" name="choice:43"></div></td>
<td align="center"><div id="div18M"></div></td>
<td align="left"><div id="div18A" ondrop="drop(event)" draggable="true">18. Sa-W 1:30-22:30</div></td>
<td align="left"><div id="div43A" ondrop="drop(event)" draggable="true">43. Su-TR 1:30-22:30</div></td>
</tr>
<tr>
<td align="left"><div id="div19" ondrop="drop(event)" ondragover="allowDrop(event)">19.<input type="number" name="choice:19"></div></td>
<td align="center"><div id="div44" ondrop="drop(event)" ondragover="allowDrop(event)">44.<input type="number" name="choice:44"></div></td>
<td align="center"><div id="div19M"></div></td>
<td align="left"><div id="div19A" ondrop="drop(event)" draggable="true">19. Sa-W 1:30-22:30</div></td>
<td align="left"><div id="div44A" ondrop="drop(event)" draggable="true">44. Su-TR 1:30-22:30</div></td>
</tr><tr>
<td align="left"><div id="div20" ondrop="drop(event)" ondragover="allowDrop(event)">20.<input type="number" name="choice:20"></div></td>
<td align="center"><div id="div45" ondrop="drop(event)" ondragover="allowDrop(event)">45.<input type="number" name="choice:45"></div></td>
<td align="center"><div id="div20M"></div></td>
<td align="left"><div id="div20A" ondrop="drop(event)" draggable="true">20. Sa-W 1:30-22:30</div></td>
<td align="left"><div id="div45A" ondrop="drop(event)" draggable="true">45. Su-TR 1:30-22:30</div></td>
</tr>
<tr>
<td align="left"><div id="div21" ondrop="drop(event)" ondragover="allowDrop(event)">21.<input type="number" name="choice:21"></div></td>
<td align="center"><div id="div46" ondrop="drop(event)" ondragover="allowDrop(event)">46.<input type="number" name="choice:46"></div></td>
<td align="center"><div id="div21M"></div></td>
<td align="left"><div id="div21A" ondrop="drop(event)" draggable="true">21. Sa-W 1:30-22:30</div></td>
<td align="left"><div id="div46A" ondrop="drop(event)" draggable="true">46. Su-TR 1:30-22:30</div></td>
</tr>
<tr>
<td align="left"><div id="div22" ondrop="drop(event)" ondragover="allowDrop(event)">22.<input type="number" name="choice:22"></div></td>
<td align="center"><div id="div47" ondrop="drop(event)" ondragover="allowDrop(event)">47.<input type="number" name="choice:47"></div></td>
<td align="center"><div id="div22M"></div></td>
<td align="left"><div id="div22A" ondrop="drop(event)" draggable="true">22. Sa-W 1:30-22:30</div></td>
<td align="left"><div id="div47A" ondrop="drop(event)" draggable="true">47. Su-TR 1:30-22:30</div></td>
</tr>
<tr>
<td align="left"><div id="div23" ondrop="drop(event)" ondragover="allowDrop(event)">23.<input type="number" name="choice:23"></div></td>
<td align="center"><div id="div48" ondrop="drop(event)" ondragover="allowDrop(event)">48.<input type="number" name="choice:48"></div></td>
<td align="center"><div id="div23M">Click here to: <input type="reset"></div></td>
<td align="left"><div id="div23A" ondrop="drop(event)" draggable="true">23. Sa-W 1:30-22:30</div></td>
<td align="left"><div id="div48A" ondrop="drop(event)" draggable="true">48. Su-TR 1:30-22:30</div></td>
</tr>
<tr>
<td align="left"><div id="div24" ondrop="drop(event)" ondragover="allowDrop(event)">24.<input type="number" name="choice:24"></div></td>
<td align="center"><div id="div49" ondrop="drop(event)" ondragover="allowDrop(event)">49.<input type="number" name="choice:49"></div></td>
<td align="center"><div id="submit">Click Here to: <input type="submit"></div></td>
<td align="left"><div id="div24A" ondrop="drop(event)" draggable="true">24. Sa-W 1:30-22:30</div></td>
<td align="left"><div id="div49A" ondrop="drop(event)" draggable="true">49. Su-TR 1:30-22:30</div></td>
</tr>
<tr>
<td align="left"><div id="div25" ondrop="drop(event)" ondragover="allowDrop(event)">25.<input type="text" name="choice:25"></div></td>
<td align="center"><div id="div50" ondrop="drop(event)" ondragover="allowDrop(event)">50.<input type="text" name="choice:50"></div></td>
<td align="center"><div id="LoginID">Login ID: <input type="text" name="ID" required></div></td>
<td align="left"><div id="div25A" ondrop="drop(event)" draggable="true">25. Sa-W 1:30-22:30</div></td>
<td align="left"><div id="div50A" ondrop="drop(event)" draggable="true">50. Su-TR 1:30-22:30</div></td>
</tr>
</table>
</form>
</body>
答案 0 :(得分：1)
您的代码包含很多问题，我只需为1行创建简单代码，您可以根据自己的要求实现。
请在输入字段中添加此id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ondragover="dragover_handler(event)"并删除输入类型Number
<!DOCTYPE html>
<html>
<head>
<title>Shift bid 2018</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
body{
background-color: black;
}
table{
color: white;
text-align: center;
border-collapse: collapse;
width: 100%;
padding: 4px;
}
th {
font-size: 28px;
color: white;
width: 20%;
text-align: right;
padding: 20px;
}
td {
font-size: 20px;
}
input {
width: 150px;
height: 25px;
padding: 5px;
font-size: 15px;
border-radius: 25px;
box-shadow: 2px 2px orange;
border: 1px solid #aaaaaa;
text-align: center;
}
filedrag.hover {
color: #f00;
border-color: #f00;
border-style: solid;
box-shadow: inset 0 3px 4px #888;
}
</style>
</head>
<body>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.value = $("#"+data).html();
}
</script>
<form method="POST" action="collect.php">
<table>
<tr>
<th>Rank your selection</th>
<th></th>
<th></th>
<th>shifts</th>
<th></th>
</tr>
<tr>
<td align="left"><div>01.<input id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ondragover="dragover_handler(event)" name="choice:1"></div></td>
<td align="center"><div>26.<input id="div26" ondrop="drop(event)" ondragover="allowDrop(event)" name="choice:26"></div></td>
<td align="center"><div id="div1M"></div></td>
<td align="left"><div id="div1A" ondragstart="drag(event)" draggable="true">1. Su-TR 1:30-22:30</div></td>
<td align="left"><div id="div26A" ondragstart="drag(event)" draggable="true">26. Su-TR 1:30-22:30</div></td>
</tr>
</table>
</form>
</body>
</html>