Search code examples
javascriptdata-transfer

Chrome Handling dataTransfer.types as Object


I'm having a really funky issue with dataTransfer in Chrome 24.0.1312.5 that I'm hoping I could get some ideas on. Basically, I have a nodeIterator that singles out some useful elements from an iframe. For each of these elements, I'm adding event listeners to permit dropping of content. I'm having a problem with this bit of code:

currentNode.addEventListener('dragover', function (e) {
    // Only accept images
    // Error occurs in below conditional
    if (e.dataTransfer.types.contains('text/uri-list')) {
        e.preventDefault();
    }
});

Here's the portion of my code that adds the data:

figure.draggable = 'true';
figure.addEventListener('dragstart', function (e) {
    e.dataTransfer.setData('text/uri-list', img.src);
    e.dataTransfer.setData('text/plain', img.alt);
    e.dataTransfer.setData('application/x-trash.delete', img.id);
});

The error I get in the console is this:

Uncaught TypeError: Object text/plain,text/uri-list,application/x-trash.delete
has no method 'contains'

I've written a fiddle that should be able to reproduce this issue, but of course it works just fine.

Any ideas of something I might be missing? Or other relevant portions of code I should check?


Solution

  • It seems that dataTransfer.types returned in Chrome is a Array.You can use indexOf() instead of contains method to workaround.