javascript - 将 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);

我创建了一个 fiddle here这表明它可以工作(对您的代码进行一些修改和一些假设)。

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

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

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