Question

我正在尝试创建一个程序，您可以在其中重新排列较小图像的表格以完成照片。目前，我有点茫然。我真的不知道如何创建一个功能，该功能允许每个图像单独移动并与其他任何图像交换。

   <html>
        <head>
           <script type="text/javascript">
            function allowDrop(ev) {
            ev.preventDefault();
            }

            function drag(ev) {
            ev.dataTransfer.setData("img", ev.target.id);
            }

            function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("img");
            ev.target.appendChild(document.getElementById(data));
            }
        </script>
    </head>
    <body>
        <script>
                <table style="width:50%">
                    <tr>
                                <td><img src="./images/1.jpg" /></td>
                                <td><img src="./images/2.jpg" /></td>
                                <td><img src="./images/3.jpg" /></td>
                                <td><img src="./images/4.jpg" /></td>
                                <td><img src="./images/5.jpg" /></td>
                                <td><img src="./images/6.jpg" /></td>
                                <td><img src="./images/7.jpg" /></td>
                    </tr>
                                <td><img src="./images/8.jpg" /></td>
                                <td><img src="./images/9.jpg" /></td>
                                <td><img src="./images/10.jpg" /></td>
                                <td><img src="./images/11.jpg" /></td>
                                <td><img src="./images/12.jpg" /></td>
                                <td><img src="./images/13.jpg" /></td>
                                <td><img src="./images/14.jpg" /></td>
                    <tr>
                                <td><img src="./images/15.jpg" /></td>
                                <td><img src="./images/16.jpg" /></td>
                                <td><img src="./images/17.jpg" /></td>
                                <td><img src="./images/18.jpg" /></td>
                                <td><img src="./images/19.jpg" /></td>
                                <td><img src="./images/20.jpg" /></td>
                                <td><img src="./images/21.jpg" /></td>
                    </tr>
                    <tr>
                                <td><img src="./images/22.jpg" /></td>
                                <td><img src="./images/23.jpg" /></td>
                                <td><img src="./images/24.jpg" /></td>
                                <td><img src="./images/25.jpg" /></td>
                                <td><img src="./images/26.jpg" /></td>
                                <td><img src="./images/27.jpg" /></td>
                                <td><img src="./images/28.jpg" /></td>
                    </tr>       
                    </table>
                </script>
    </body>
</html>

HTML中的拖放问题

0 个答案: