draggable Draggable does not trigger OnDrag and Snap in React.

[Thomas Devolder]

So I am trying to rotate a circle and snap it to 90 degrees but I can rotate it but It doesn't trigger the onDrag en snap function.  I don't know why, I also don't get any errors.

    let rotationSnap = 90; 
        Draggable.create(vinyl, {
            type:"rotation", 
            OnDrag: () => console.log('works'),   
            snap: function(endValue) { 
                console.log(endValue);
                console.log(Math.round(endValue / rotationSnap) * rotationSnap)
        //this function gets called when the mouse/finger is released and it plots where rotation should normally end and we can alter that value and return a new one instead. This gives us an easy way to apply custom snapping behavior with any logic we want. In this case, just make sure the end value snaps to 90-degree increments but only when the "snap" checkbox is selected.
                return Math.round(endValue / rotationSnap) * rotationSnap;
            }
    })
    }

[PointC]

Hi @Thomas Devolder 

 

Welcome to the forum.

 

The onDrag isn't firing because it's onDrag rather than OnDrag. I think you meant to use inertia for the snapping. Here's your code from above pasted into a CodePen. You can see it's all working correctly.

 

See the Pen 6947cf4d4f6f3b3111b4c343bf230b1e by PointC (@PointC) on CodePen

 

Hopefully that helps. For other questions, it's always best to provide a minimal demo.

 

Happy tweening and welcome aboard.

 

[Thomas Devolder]

Hi @PointC 

 

Thank you for your help. 

 

The onDrag function works but is there a way I can get the value of the current rotation of the square inside the onDrag function? 

 

I tried (e)=> {console.log(e)} but I can't find a rotation value inside the object. 

[PointC]

You'll need to use a regular function.

 

onDrag: function() {console.log(this.rotation)}

Happy tweening.