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：无法调用未定义的方法'setData'

我尝试使用静态图像，我通过dom加载它并且工作正常，但为什么我的动态生成的图像不起作用？出于某种原因，在drag函数中，当ev是动态创建的图像时，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);

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

img首先被加载到蓝色的“body”div中，如果你快速点击按钮几次，你会看到这个。

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

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

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

1 个答案: