Can I change states when using Dragula?

[vanjaw]

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, $('drop-target1'), $('drop-target2')])

   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();
    }
 }

}

[paddotk]

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..