Draggable Knob Spin problem in Chrome

[gmgurgen]

Hello,

I created a draggable knob for my project. It has 5 sections, snaps at every 90 degrees.

Is it possible if it also clicked on 90 degree stops, it rotates automatically to these points?

 

Waiting for your helps, thank you in advance.

See the Pen dJzoKv by gmgurgen (@gmgurgen) on CodePen

[Shaun Gorneau]

A quick and dirty way would be to put simple click targets in those positions and allow a click event to push the knob to those positions. A little CSS to position and hide ... and a little JS to update the draggable object.

 

See the Pen bvpbZR by sgorneau (@sgorneau) on CodePen

 

I'm sure a better method would be to use the Draggable's onClick method to get mouse coordinates and determine the click position relative to the knob and logic to determine the closest snap point. But for a few simple snap-to points, a couple of clickable elements might be what you're looking for.

 

EDIT: Based on your positioning things ... you may want to look at this in CodePen itself ... seems some relative positions are causing the clickable elements to not align.

 

EDIT 2: Reduced your pen down to simplify it for positioning.

 

[gmgurgen]

It's actually useful but, i have another problem right now.
It needs to updateData too, i couldn't call updateData function in click on snap-tos.

I need it because, when the knob turns, it actually makes some tweens on original page. Because there are lots of codes, i didn't embed them in this.

See the Pen dJzoKv by gmgurgen (@gmgurgen) on CodePen

 

[gmgurgen]

The current version of i shared last, it gets tween if i click on knob after click on snaptos points. Why doesn't it set tween in the first click.

It also doesn't work if second click on "snap-tos li". It works only click on knob except "snap-tos li".

[Sahil]

Here is how you can snap on press. Check the comments in demo from following thread, it will explain how it works in details.

 

 

See the Pen zWqBGb?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[Shaun Gorneau]

55 minutes ago, Sahil said:

Here is how you can snap on press. Check the comments in demo from following thread, it will explain how it works in details.

 

 

See the Pen zWqBGb?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

 

 

@Sahil That's exactly what I was hoping to see as this thread grew