在 javascript 中动态地在元素数组上启动 ondrag

Question

我有一组图像元素，

var im = ["im1","im2"]; // from db or local drive

然后动态创建图像为：

var l = imagelist.length;
for (var i = 0; i < l; ++i) {
    if (i in im) {
    var s = im[i];

    var img = document.createElement("img");
    img.src = s;
    img.width = width;
    img.draggable = true;

    var body = document.getElementById("body");
    body.appendChild(img);

    this.addEventListener('ondragstart', function(event) {
        alert(event.target.id);
        event.dataTransfer.setData('text/plain', event.target.id);
    });

}

虽然 ondragstart 事件触发，但 alert(event.target.id); 显示空白。

这就是拖放功能不适用于动态创建的图像数组的原因。

尽管尝试使用单个图像标签进行拖动 <img> 效果绝对不错，但图像数组无法以这种方式工作。

有什么解决办法吗？

Answer 1

您还没有为您的任何元素分配 id。

像这样应该可以解决问题：

var img = document.createElement("img");
img.src = s;
img.id = "image_" + i;
// The rest of your assignments and code...

在 javascript 中动态地在元素数组上启动 ondrag

ondragstart on an array of elements dynamically in javascript

html

javascript

html5-canvas