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>

然后将下降更改为：

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/

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

1 个答案: