Jump to content

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

Draggable: Drag or Rotate

Recommended Posts

I'm interested in creating a draggable div that can be translated or rotated depending on some criteria, for example: rotate if CTRL is pressed, translate otherwise...or, translate if the mouse is clicked near the center of the object, rotate if the mouse is clicked near the edge of the object.


The method I've tested involves detecting the CTRL key up/down events and killing the existing translate/rotation draggable and creating the other one. This works except that after an object that has been rotated, then translating it causes additional rotation.


Any suggestions?


See the Pen NGMLoV by anon (@anon) on CodePen

Link to comment
Share on other sites

I use elements in the corners to do this, but you could calculate it based on where the user clicked. Using elements is nice because you can position them outside of your element. I also setup it to rotate when ctrl is pressed.


See the Pen BoxMZB by osublake (@osublake) on CodePen

  • Like 2
Link to comment
Share on other sites

Thanks guys, this helped me out immensely.


I ended up going with OSUblack's method, so marked his as the answer. Would mark you both if I could.

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.