Jump to content
Search Community

Draggable : snap only within proximity of snap point

DRJO test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

  • Solution

Welcome to forums @DRJO

 

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

 

image.png

 

 

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.
×
×
  • Create New...