Using Javascript, I dynamically create multiple dropzones after page load, onto which also dynamically created DIVs can be dropped. I am experiencing the error that all dropped DIVs will only be assigned to the dropzone which was created first.
Initialization code:
interact('.dropzone').dropzone({
accept: '.droppable',
overlap: 0.75,
ondropactivate: function (event) {
},
ondragenter: function (event) {
},
ondragleave: function (event) {
},
ondrop: function (event) {
console.log("DROPZONE ID: " + $(event.dropzone.target).data("uniqueid"));
},
ondropdeactivate: function (event) {
}
})
As you can see at ondrop listener, I output the ID of the dropzone onto which something has been dropped. But the ID always belongs to the dropzone which has been dynamically added first to the DOM no matter where I drop the DIVs.
Does this happen to anyone else? How can that be fixed?
Using Javascript, I dynamically create multiple dropzones after page load, onto which also dynamically created DIVs can be dropped. I am experiencing the error that all dropped DIVs will only be assigned to the dropzone which was created first.
Initialization code:
My droppable DIV:
<div class="resize-drag drag-drop droppable" data-uniqueid="12345">Foo</div>
My dropzones:
As you can see at ondrop listener, I output the ID of the dropzone onto which something has been dropped. But the ID always belongs to the dropzone which has been dynamically added first to the DOM no matter where I drop the DIVs.
Does this happen to anyone else? How can that be fixed?
Working with: