Draggable : snap only within proximity of snap point

[DRJO]

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

[OSUblake]

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. 

 

 

[DRJO]

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.