1

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

这是它工作时的样子。

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

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

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

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

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

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

我可以添加可拖动属性。

所以在我拖放到 dropArea div 之后，我得到了这样的 html 代码。

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

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

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

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

4

2 回答 2

1

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

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

对此的修复是对 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);

}

通过这样做，您可以克隆原始 paragraf 内容:)

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

于 2016-06-05T09:55:03.450 回答
0

there are 2 parts to this answer

  1. Ensure that you assign an unique id attribute to the drag-n-dropped image
  2. Use the following javascript functions copied from http://www.w3schools.com/html5/html5_draganddrop.asp but include a new one called dropcopy

These are the functions from the w3schools example

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

This is the new one for 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);

                    }

Then for the div that requires a copy just make sure you use the dropcopy for the ondrop attribute

<div id="div2" class="sneaks" ondrop="dropcopy(event)"
                ondragover="allowDrop(event)"></div>
于 2012-09-04T08:56:58.773 回答