feross/drag-drop

Can't apply drag & drop to class

lightsnow0 opened this issue · 3 comments

Hey,
I want to create multiple dropzones. They have in common, that the all have the same class, so i though i can use as a selector in my dragdrop function the class ".dropzone"

window.remove = DragDrop('body', {
        onDrop: function (files, pos) {
          var names = files.map(function (file) { return file.name })
          window.alert('onDrop fired! ' + files.length + ' files: ' + names.join(', '))
          window.files = files
          console.log('onDrop', files)
          console.log('Dropped at coordinates', pos.x, pos.y)
        }
      })

But I'm getting this error:

Uncaught TypeError: Cannot read property 'addEventListener' of null

When i change the class back to body, it works.

What can I do to prevent this ?
To mention it, I'm using your min.js file

The error is most likely due to there being no <div class="dropzone" /> element when DragDrop is called. If it is created by javascript it needs to be there before calling DragDrop.

I think @JamesKyburz is correct. Also, if you pass in a selector like .dropzone the library will just select the first element. So, you're going to need to loop over all the elements yourself.

That said, I think we can provide a friendlier message in case an invalid element or selector is provided. Here's a PR: #29