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中创建的图像。

我可以添加draggable属性。

因此，在拖放到dropArea div后，我得到的html代码就是这样的。

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

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

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

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

Answer 1

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

正如Shrishaster在Kim Stacks的评论中所说： “我怎样才能为文本而不是图像做同样的事情？”

对此的修复是对Kim Stacks给出的dropcopy函数的一个小调整：

mydf <- read.table(text="V1     V2
                   1 RAB27A RAD21
                   2 RAB27A STAT1
                   3 ITGA4 RAD21
                   4 PANK3 SIX5
                   5 PANK3 SREBF1
                   6 PANK3 USF1", header=TRUE)

通过这样做，您可以克隆原始的paragraf内容：）

我希望这至少会帮助一些人。

Answer 2

这个答案分为两部分

确保为拖放图像分配唯一的id属性
使用从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>

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

2 个答案: