Php 将数据拖放到输入字段
我有一个html文档，可以发布到PHP，然后再发布到CSV。我希望能够将选择从右侧拖动到左侧的输入字段中，并让它存储与其关联的值。1、2、3、4等。。。。然后在提交时，按照数据被拖动的顺序发送数据。这是我目前为止的HTML。如果我手动将数字输入框中，它会工作，但如果我拖动，它不会将数据值移动到输入字段中Php 将数据拖放到输入字段,php,html,Php,Html,我有一个html文档，可以发布到PHP，然后再发布到CSV。我希望能够将选择从右侧拖动到左侧的输入字段中，并让它存储与其关联的值。1、2、3、4等。。。。然后在提交时，按照数据被拖动的顺序发送数据。这是我目前为止的HTML。如果我手动将数字输入框中，它会工作，但如果我拖动，它不会将数据值移动到输入字段中 <!DOCTYPE html> <!-- To change this license header, choose License Headers in Projec
<!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>
身体{
背景色：黑色；
}
桌子{
颜色：白色；
文本对齐：居中；
边界塌陷：塌陷；
宽度：100%；
填充：4px；
}
th{
字号：28px；
颜色：白色；
宽度：20%；
文本对齐：右对齐；
填充：20px；
}
运输署{
字体大小：20px；
}
输入{
宽度：150px；
高度：25px；
填充物：5px；
字体大小：15px；
边界半径：25px；
盒子阴影：2个2个橙色；
边框：1px实心#AAAAA；
文本对齐：居中；
}
filedrag.hover{
颜色：#f00；
边框颜色：#f00；
边框样式：实心；
盒影：插入0 3px 4px#888；
}
功能dragover_处理器（ev）{
ev.preventDefault（）；
ev.dataTransfer.dropEffect=“移动”；
}
功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransferItem.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransferItem.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}
2018年轮班投标
给你的选择排序
转移
1
26
1.Su TR 1:30-22:30
26Su TR 1:30-22:30
2
27
2.M-F 1:30-22:30
27Su TR 1:30-22:30
3
28
3.图萨1:30-22:30
28Su TR 1:30-22:30
4
29
4.W-Su 1:30-22:30
29Su TR 1:30-22:30
5
30
5.Tr-M 1:30-22:30
30Su TR 1:30-22:30
6
31
6.F-Tu 1:30-22:30
31Su TR 1:30-22:30
7
32
7.西南1:30-22:30
32Su TR 1:30-22:30
8
33
8.西南1:30-22:30
33Su TR 1:30-22:30
9
34
9西南1:30-22:30
34Su TR 1:30-22:30
10
35
10西南1:30-22:30
35Su TR 1:30-22:30
11
36
11西南1:30-22:30
36Su TR 1:30-22:30
12
37
12西南1:30-22:30
37Su TR 1:30-22:30
13
38
13西南1:30-22:30
38Su TR 1:30-22:30
14
39
14西南1:30-22:30
39Su TR 1:30-22:30
15
40
15西南1:30-22:30
40Su TR 1:30-22:30
16
41
16西南1:30-22:30
41Su TR 1:30-22:30
17
42
17西南1:30-22:30
42Su TR 1:30-22:30
18
43
18西南1:30-22:30
43Su TR 1:30-22:30
19
44
19西南1:30-22:30
44Su TR 1:30-22:30
20
45
20西南1:30-22:30
45Su TR 1:30-22:30
21
46
21西南1:30-22:30
46Su TR 1:30-22:30
22
47
22西南1:30-22:30
47Su TR 1:30-22:30
23
48
点击此处：
23西南1:30-22:30
48Su TR 1:30-22:30
24
49
点击此处：
24西南1:30-22:30
49Su TR 1:30-22:30
25
50
登录ID:
25Sa-W 1:30-22:30
50Su TR 1:30-22:30
id=“div1”ondrop=“drop（event）”ondragover=“allowDrop（event）”ondragover=“dragover\u handler（event）”