Jump to content

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

Draggable : snap only within proximity of snap point

Go to solution Solved by OSUblake,

Recommended Posts

How can we easily disable snapping if the nearest snap point is not within a proximity of a snap point ?


I didn't create a pen because I am using members inertia plugin.


Many thanks

Link to comment
Share on other sites

  • Solution

Welcome to forums @DRJO


You can use the trial version of all our plugins on CodePen, CodeSandbox, etc. 





You should use a snap points function, and if the point isn't within a certain radius, return the point that was passed in. Otherwise, return the closest point. 


snap: {
  points: function(point) {
    // now you can run whatever logic you want in here, like
    // looping through the other boxes to see which is closest 
    // and if it's within a certain distance, apply the snapping.
    // Just return the adjusted point with x/y properties or 
    // if it's not within the range, return the original point:
    return point;


This thread should help give you some ideas. 



  • Like 2
Link to comment
Share on other sites

this.dragger = Draggable.create('#progressbar__handle', {
      type: 'x',
      lockAxis: true,
      bounds: '#progressbar',
      snap: (value) => {
        let val = this.offsets.filter((n) => {
          return Math.abs(n - value) < 35
        if (val.length) return val[0]
      overshootTolerance: 0.5


Cheers @OSUBlake, sharing my solution above.

  • Like 1
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.