Javascript 在表格单元格中拖动图像并跟踪其位置

我想拖动表格单元格中的图像。如何修改以下内容，以便将一个图像拖动到另一个图像上：

function drag(ob) {
ob.dataTransfer.setData("Text",ob.target.id); }

function drop(ob) {
var id = ob.dataTransfer.getData("Text");
if (!$(ob.currentTarget).find("img")[0])
    ob.target.appendChild(document.getElementById(id));
ob.preventDefault();    
}

function allowDrop(ob) {
  ob.preventDefault();
}

完整代码在

此外，是否可以在drop函数中使用一些代码来显示所有图像（从第1行到第3行）的文件名，以便将其传递给php进行处理？

---

谢谢。

我不完全确定你想要达到什么目标。但这将允许图像相互拖动并删除替换的图像。还有一个小div显示如何跟踪图像名称

我添加了一个div来跟踪名字。您可以轻松地将其设置为隐藏字段

<div id="images"></div>

---

非常感谢您抽出时间。我正在进行一个棋类游戏项目，用户将轮流使用。不会有人工智能的参与，但我会检查，看看是否有一个有效的行动。这就是为什么我需要知道每个球员移动后每个棋子的位置。您认为这是一种正确的方法吗？我会将电路板视为8x8阵列，然后在每次移动时，验证/更新阵列，然后将阵列绑定到UI。幸运的是，很多人都玩过js国际象棋。看一看谢谢你的建议。我在发布之前做了很多研究，甚至看到了你建议的链接。不幸的是，这个链接只上了2节课，并没有解释我要找的是什么，也就是如何处理用户的移动。大部分编码都是用php完成的（我确实会使用数组来存储电路板），我只是不知道如何处理电路板显示、javascript/jquery拖放以及移动了哪一块。张贴在这里的小黑板只是为了学习如何显示黑板。还有其他建议吗？我做了更多的研究；也许我所需要的只是知道工件是从哪个单元被拖拽出来的，它是从哪个单元被扔到哪个单元，即R1C1->R2C2（只要它没有被拖拽和扔到同一个地方）。一旦执行了拖放操作，就不能拖动任何其他内容。我可以在服务器端执行所有验证。我尝试了很多次，但都没有成功，用当前的示例实现了这一点。我对jquery完全陌生，不过我正在尝试。要实现这一点，需要在当前代码中添加/修改哪些内容？谢谢。当我构建JS chess（）版本时，我使用jQuery UI DragDrop来实现这个功能，它工作得很好。唯一困扰我的是DragDrop选项中的validate属性不允许动态验证移动。为此，您必须验证您的内部表示，然后在屏幕上移动显示板。

function drop(ob)
{
    var id = ob.dataTransfer.getData("Text");
    var t = ob.target;

    if (ob.target.nodeName == "IMG")
        t = ob.target.parentNode;

    t.innerHTML = "";
    var img = document.getElementById(id);
    t.appendChild(img);

    $('#images').append(img.src + "; " )

    ob.preventDefault();    
}