This is my code, I've tried using setAttribute and don't understand why it doesn't work. I've also tried using .transform with the same result. setAttribute is located in the ondrop event function.
interact('.dropzone')
.dropzone({
// Require a 75% element overlap for a drop to be possible
overlap: 0.75,
// listen for drop related events:
ondropactivate: function (event) {
// add active dropzone feedback
event.target.classList.add('drop-active')
},
ondragenter: function (event) {
var draggableElement = event.relatedTarget
var dropzoneElement = event.target
// feedback the possibility of a drop
dropzoneElement.classList.add('drop-target')
draggableElement.classList.add('can-drop')
},
ondragleave: function (event) {
// remove the drop feedback style
event.target.classList.remove('drop-target')
event.relatedTarget.classList.remove('can-drop')
},
ondrop: function (event) {
console.log("here")
event.relatedTarget.setAttribute('resize-drag', 'width:100px')
event.relatedTarget.setAttribute('resize-drag', 'height:100px')
},
ondropdeactivate: function (event) {
// remove active dropzone feedback
event.target.classList.remove('drop-active')
event.target.classList.remove('drop-target')
}
})
Just for debugging purposes, can you try adding a classList ? That way you'll see the class appended
Create a custom class to change something visible such as the background as example. That might help you.
Also, try to provide a sandbox if you can, it's easier to help that way!