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

Question

我正在尝试向我动态创建的图像添加一个 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 处理程序添加到它。

谢谢，

Answer 1

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

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

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

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

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

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