0

我有问题。我用足球运动员和足球场创建了基地,并在其中放置了 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>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td><div id="box3" ondrop="drop(event)" ondragover="allowDrop(event)" class="mid"></div></td>
                        <td>&nbsp;</td>
                        <td><div id="box3" ondrop="drop(event)" ondragover="allowDrop(event)" class="def"></div></td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>

                    <tr>
                        <td><div id="box3" ondrop="drop(event)" ondragover="allowDrop(event)" class="for"></div></td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td><div id="box3" ondrop="drop(event)" ondragover="allowDrop(event)" class="mid"></div></td>
                        <td>&nbsp;</td>
                        <td><div id="box3" ondrop="drop(event)" ondragover="allowDrop(event)" class="def"></div></td>
                        <td>&nbsp;</td>
                    </tr>

                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</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>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td><div id="box3" ondrop="drop(event)" ondragover="allowDrop(event)" class="mid"></div></td>
                        <td>&nbsp;</td>
                        <td><div id="box3" ondrop="drop(event)" ondragover="allowDrop(event)" class="def"></div></td>
                        <td>&nbsp;</td>
                    </tr>

                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td><div id="box3" ondrop="drop(event)" ondragover="allowDrop(event)" class="mid"></div></td>
                        <td>&nbsp;</td>
                        <td><div id="box3" ondrop="drop(event)" ondragover="allowDrop(event)" class="def"></div></td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                </table>
                <input type="submit" value="Pošalji" name="btnPosalji"/>

            </div>
</form>
4

0 回答 0