我有问题。我用足球运动员和足球场创建了基地,并在其中放置了 div。
截图>> http://www.dodaj.rs/f/3x/Jl/1Ee0tb6P/teren.jpg
jQuery:
我在 youtube 教程上找到了简单的拖放代码。
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("img", ev.target.id);
}
function drop(ev) {
var image = ev.dataTransfer.getData("img");
ev.target.appendChild(document.getElementById(image));
ev.preventDefault();
}
HTML:
我将职位组织到没有边框的表格中,也许,html代码表现得混乱。
<form action="" method="post">
<div class="teren">
<table>
<tr>
<td> </td>
<td> </td>
<td><div id="box3" ondrop="drop(event)" ondragover="allowDrop(event)" class="mid"></div></td>
<td> </td>
<td><div id="box3" ondrop="drop(event)" ondragover="allowDrop(event)" class="def"></div></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><div id="box3" ondrop="drop(event)" ondragover="allowDrop(event)" class="for"></div></td>
<td> </td>
<td> </td>
<td><div id="box3" ondrop="drop(event)" ondragover="allowDrop(event)" class="mid"></div></td>
<td> </td>
<td><div id="box3" ondrop="drop(event)" ondragover="allowDrop(event)" class="def"></div></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td><div id="box3" ondrop="drop(event)" ondragover="allowDrop(event)" class="gk"></div></td>
</tr>
<tr>
<td><div id="box3" ondrop="drop(event)" ondragover="allowDrop(event)" class="for"></div></td>
<td> </td>
<td> </td>
<td><div id="box3" ondrop="drop(event)" ondragover="allowDrop(event)" class="mid"></div></td>
<td> </td>
<td><div id="box3" ondrop="drop(event)" ondragover="allowDrop(event)" class="def"></div></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><div id="box3" ondrop="drop(event)" ondragover="allowDrop(event)" class="mid"></div></td>
<td> </td>
<td><div id="box3" ondrop="drop(event)" ondragover="allowDrop(event)" class="def"></div></td>
<td> </td>
<td> </td>
</tr>
</table>
<input type="submit" value="Pošalji" name="btnPosalji"/>
</div>
</form>