php - ドロップされた画像の ID を取得するにはどうすればよいですか。この ID は mysql に送信されます

Question

問題があります。フットボール選手のいるベースと、彼らがドロップする 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>