Question

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

P.S。我使用的是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'));

是否可以使用dataTransfer

目前的工作用途：

1 个答案: