Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Thomas Devolder

Draggable does not trigger OnDrag and Snap in React.

Go to solution Solved by PointC,

Recommended Posts

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, {
            OnDrag: () => console.log('works'),   
            snap: function(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;
Link to comment
Share on other sites

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.



  • Like 4
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

  • Solution

You'll need to use a regular function.


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

Happy tweening.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.