将 ondragstart 处理程序添加到动态创建的图像答案

【问题标题】：adding ondragstart handler to dynamically created images将 ondragstart 处理程序添加到动态创建的图像
【发布时间】：2013-04-30 09:02:42
【问题描述】：

我正在尝试将 ondragstart 处理程序添加到我动态创建的图像中：

var image = new Image();
    image.src = "https://www.filepicker.io/api/file/JhJKMtnRDW9uLYcnkRKW";
    image.onload = function(event){
        this.ondragstart = drag(event);
        divImage.appendChild(this);
    };
function drag(ev)
    {
        ev.dataTransfer.setData("Text",ev.target.id);
    }

但是，我得到了错误：Uncaught TypeError: Cannot call method 'setData' of undefined

我已尝试使用通过 dom 加载的静态图像进行此操作，并且效果很好，但是为什么我的动态生成的图像不起作用？出于某种原因，在拖动功能中，当它是动态创建的图像时，ev 不包含 dataTransfer 对象？有谁知道为什么？

这就是我想要做的： http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop 除了，我希望能够通过 javascript 动态创建图像，并将 ondragstart 处理程序添加到它。

谢谢，

【问题讨论】：

标签： javascript html drag-and-drop

【解决方案1】：

因为动态生成的元素在页面加载时不属于 DOM，所以您需要对元素的每个新实例使用 addEventListener，如下所示：

this.addEventListener('dragstart', function() {drag(ev)}, false);

我创建了一个小提琴 here，它向您展示了它的工作原理（对您的代码进行了一些修改和一些假设）。

首先将 img 加载到蓝色的“body”div 中，如果您快速单击该按钮几次，您将看到这一点。

这篇 Stackoverflow 帖子与您的帖子密切相关：Javascript ondrag, ondragstart, ondragend

编辑：正如帖子中所述，如果您想要一个用于拖动事件的跨浏览器解决方案，您最好使用 js 框架。

【讨论】：

使用 .addEventListener('ondragstart' 不起作用，有什么想法吗？
@SuperUberDuper 也许你混淆了这两种语法：elem.ondragstart = function() { ... } 和 elem.addEventListener('dragstart', function() {...}, false);注意使用 addEventListener 时它是 dragstart，而不是 ondragstart