Draggable list with snap points

[Grahamorriss]

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.

Graham

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

[Jonathan]

Hello, Grahamorriss and welcome to the GreenSock Forum!

 

I believe what your after is the property liveSnap

 

Found in the Draggable Docs:

 

http://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/

 

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)

[Grahamorriss]

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

Graham

[Grahamorriss]

Erm... Evidently I just don't get it!

 

(updated) 

 

G

[Carl]

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;
  }
});

 

http://codepen.io/GreenSock/pen/VaPgWX?editors=0010

[Grahamorriss]

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.

 

G