是否可以使用 dataTransfer 传输对象

Question

我有一个<img> 元素，它有一个自定义属性meta，而它又拥有自己的属性。拖动图像时，我想将事件的dataTransfer 设置为包含meta 对象本身，而不必设置对meta 属性的多个引用。希望这有意义吗？示例如下...

附言我正在使用 Chrome，我相信我在某处读到这可能与 dataTransfer 存在问题。

当前工作使用情况：

img=div.getElementsByTagName('img')[0];
img.meta={
    tit:itm.tit,
    ref:itm.ref,
    cat:itm.cat
};
img.addEventListener('dragstart',function(e){
    e.dataTransfer.setData('tit',this.meta.tit);
    e.dataTransfer.setData('ref',this.meta.ref);
    e.dataTransfer.setData('catId',this.meta.cat.id);
    e.dataTransfer.setData('catRef',this.meta.cat.ref);
    e.dataTransfer.setData('url',this.src);
});
enGal.appendChild(img);

这是可行的，但这只是意味着我必须从 drop 事件中调用每个引用来获取数据，即：

title=e.dataTransfer.getData('tit');
...

我希望能够做这样的事情：

img=div.getElementsByTagName('img')[0];
img.meta={
    tit:itm.tit,
    ref:itm.ref,
    cat:itm.cat,
    // EDIT
    url:img.src
};
img.addEventListener('dragstart',function(e){
    // EDIT
    e.dataTransfer.setData('meta',this.meta);
});
enGal.appendChild(img);

然后：

meta=e.dataTransfer.getData('meta');
title=meta.tit;
...

如果我尝试将dataTransfer 设置为meta 对象，它只是将对象作为字符串返回，即：

e.dataTransfer.setData('meta',this.meta);

meta=e.dataTransfer.getData('meta');

// meta == "[object Object]"

console.log(meta); // "[object Object]"

Answer 1

我认为您应该使用 JSON 来传递元对象，因为：

    img=div.getElementsByTagName('img')[0];
    img.meta={
        tit:itm.tit,
        ref:itm.ref,
        cat:itm.cat,
        // EDIT
        url:img.src
    };
    img.addEventListener('dragstart',function(e){
        // EDIT
        e.dataTransfer.setData('meta',JSON.stringify(this.meta));
//converting to JSON in the line above.
    });
    enGal.appendChild(img);


    //converting from JSON to object
    meta=JSON.parse(e.dataTransfer.getData('meta'));