Jump to content

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

Draggable list with snap points

Recommended Posts

Hi all


I'm new to Greensock, and to Codepen. And kind of to Javascript as well. So please be gentle. ;)


I'm trying to create a vertical, draggable list that appears in an aperture, and will scroll depending on how fast it's dragged, and when it slows to a stop, it snaps the nearest list item to the middle of the aperture.


I've added the Codepen to show how far I've got, but any further attempts at snap points have been discarded as they simply don't work.


Can anyone advise me either how to go about this, or toward a resource that will guide me?


Thank you.


See the Pen MyJOvQ by Grahamorriss (@Grahamorriss) on CodePen

Link to comment
Share on other sites

Hello, Grahamorriss and welcome to the GreenSock Forum!


I believe what your after is the property liveSnap


Found in the Draggable Docs:




And you can check out this GreenSock Draggable example using liveSnap (check the checkbox to turn liveSnap on)


See the Pen zDwEk by GreenSock (@GreenSock) on CodePen


Taken from the Draggable Docs:

  • liveSnap : Function | Boolean | Array - allows you to define rules that get applied WHILE the element is being dragged (whereas regular snap affects only the end value(s), where the element lands after the drag is released). For example, maybe you want the rotation to snap to 10-degree increments while dragging or you want the x and y values to snap to a grid (whichever cell is closest). You can define theliveSnap in any of the following ways:
    • as a function - this function will be passed one numeric parameter, the natural (unaltered) value. The function must return whatever the new value should be (you run whatever logic you want inside your function and spit back the value). For example, to make the value snap to the closest increment of 50, you'd do liveSnap:function(endValue) { return Math.round(endValue / 50) * 50; }
    • as an array - if you use an array of values, Draggable will loop through the array and find the closest number (as long as it's not outside any bounds you defined). For example, to have it choose the closest number from 10, 50, 200, and 450, you'd do liveSnap:[10,50,200,450]
    • as an object - if you'd like to use different logic for each property, like if type is "x,y" and you'd like to have the "x" part snap to one set of values, and the "y" part snap to a different set of values, you can use an object that has matching properties, like: liveSnap:{x:[5,20,80,400], y:[10,60,80,500]} or if type is "top,left" and you want to use a different function for each, you'd do liveSnap:{top:function(endValue) { return Math.round(endValue / 50) * 50; }, left:function(endValue) { return Math.round(endValue / 100) * 100; }}
    • as a boolean (true) - live snapping will use whatever is defined for the snap (so that instead of only applying to the end value(s), it will apply it "live" while dragging too)


  • Like 2
Link to comment
Share on other sites

Hi Jonathan :)


Thanks so much for the reply. I had already tried adding liveSnap, but am obviously doing something wrong as it wouldn't do anything!


I'll try again, in a bit, and add my code to my Codepen.


Thanks again :)


Link to comment
Share on other sites

Thanks for the demo. Is this what you are after?


var listHeight = 32;
Draggable.create("#scroller", {
  type: "scroll",
  throwProps: true,

  snap: function(endValue) {
    return -Math.round(endValue / listHeight) * listHeight;



  • Like 4
Link to comment
Share on other sites

Carl - you are a STAR!!! I was so close but SO, so far!!!


Thank you so much. This is perfect!!!


I shall be forever in your debt. :)



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