Can I change states when using Dragula?
vanjaw opened this issue · 1 comments
Hi!
I’m trying to use Dragula to implement a drag-and-drop exercise in our web application. The problem I’ve encountered is that we can’t change states from within the built-in Dragula functions. In the example further down I have a counter “counts” that counts each element that is dragged correctly. The problem is in the if-statement were I’ve written /* the following line is not working */, here I would like to change states.
The problem is that I can’t use “this” and I can’t find anyway to make my code rerender from the Dragula function…
Do you have any idea on how to solve this problem?
Example:
dragulaCreator = (container) => {
let drake = Dragula([container,
drake.on('drop', function(el, target){
if ((el == $('drag-elements1'))&&(target == $('drop-target1'))){
/* the following line is not working */
this.setState({endExercise: true})
}
else {
drake.cancel();
}
}
}
Is the this
keyword the issue? With arrow functions that shouldn't be a problem, otherwise you'd have to bind it.
If dragulaCreator = (container) => {}
works (and so you're using ES6) then you should do the same with the drop
event handler:
drake.on('drop', (el, target) => {}
NB I wonder if comparing js DOM elements to jQuery selectors is assured to work..