Can't apply drag & drop to class
lightsnow0 opened this issue · 3 comments
lightsnow0 commented
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
JamesKyburz commented
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
.
feross commented
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.