1

我正在尝试将 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);
    }

但是，我收到错误：未捕获的类型错误：无法调用未定义的方法“setData”

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

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

谢谢，

4

1 回答 1

5

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

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

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

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

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

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

于 2013-04-30T10:03:32.813 回答