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

Question

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

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();
}

jsfiddle上的完整代码

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

Answer 1

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

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

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

然后将 drop 更改为：

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();    
} 

http://jsfiddle.net/qgp7N/3/