如何使用 html5 拖放另一个拖放图像的副本？

Question

我使用来自http://robertnyman.com/html5/fileapi-upload/fileapi-upload.html 的示例实现了使用拖放进行上传的实现

这是它工作时的样子。

• 拖放前：http://cl.ly/image/0c3f1m0M2K2D
• 拖放后：http://cl.ly/image/0Z131N333n0L

droparea 是一个 div，我称之为 dropArea。

现在问题出在我拖放的假定的 4 个图像中，然后我希望选择其中两个具有特殊状态。例如，我想通知服务器图像 1 和 3 是偷偷摸摸的。

我希望能够将已经在 div 元素中的图像 1 和 3 拖放到 2 个绘制的 div 中

http://cl.ly/image/3T3O410X2E40

我意识到到目前为止我无法做到这一点。

主要原因是我无法将 ondragstart 属性添加到在 dropArea div 中创建的图像中。

我可以添加可拖动属性。

所以在我拖放到 dropArea div 后，我得到的 html 代码如下所示。

我可以按照我想要的方式获得效果吗？

如果没有，是否有其他方法可以在不使用拖放的情况下实现相同的结果？也许右键单击拖放的图像并选择它们作为潜行？

更新： 我意识到我需要添加一个 id 属性，所以现在 dropArea 中另一个拖放图像的拖放效果有效。

但我想拖放副本而不是原始图像。因此，我仍然需要这方面的帮助。

Answer 1

我知道这个问题已经超过 4 年了，但也许其他人也可能需要这些信息 :)

因此，正如 shrishaster 在 Kim Stacks 上的 cmets 中所问的那样： “我怎样才能为文本而不是图像做同样的事情？”

解决此问题的方法是对 Kim Stacks 给出的 dropcopy 函数进行小幅调整：

function dropcopy(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
var copyimg = document.createElement("p");
var original = document.getElementById(data);
copyimg.innerHTML = original.innerHTML;
ev.target.appendChild(copyimg);

}

通过这样做，您可以复制原始段落内容:)

我希望这至少会有所帮助。

Answer 2

这个答案有两部分

1. 确保为拖放图像分配唯一的 id 属性
2. 使用以下从 http://www.w3schools.com/html5/html5_draganddrop.asp 复制的 javascript 函数，但包括一个名为 dropcopy 的新函数

这些是 w3schools 示例中的函数

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

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

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

这是 dropcopy 的新版本

                    function dropcopy(ev)
                    {
                    ev.preventDefault();
                    var data=ev.dataTransfer.getData("Text");
                    var copyimg = document.createElement("img");
                    var original = document.getElementById(data);
                    copyimg.src = original.src;
                    ev.target.appendChild(copyimg);

                    }

然后对于需要复制的 div，只需确保您使用 dropcopy 作为 ondrop 属性

<div id="div2" class="sneaks" ondrop="dropcopy(event)"
                ondragover="allowDrop(event)"></div>