Jump to content


Draggable detect the first and last element

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello, i have a problem with the draggable.



In this post http://greensock.com/forums/topic/15449-set-drag-fluid/?hl=draggable+fluid#entry67192



and the codepen is 


i want to know where im in the last or first element, and if i try move more than the last, i want append more (i have the code append now) but i cant find where i can put the function to this work correctly. The same for the first i prepend elements.


I try in all places possible put the append and prepend and no work correctly.


So some one can help me?






See the Pen e83cec88a729a5bedb96124bbc443d72?editors=0010 by osublake (@osublake) on CodePen

Link to comment
Share on other sites

I can't really do all that for you but you can assign an index value to each draggable and then elsewhere in your code you can test to see what the index of the currentDraggable is and use that in your logic for detecting whether it is the first or last.


I could not fork the private codepen you linked to, but try replacing the JUST THE createDraggable function with:


function createDraggable(page, index) {
  var lastPage = (index === pageCount - 1);
  var pos = page._gsTransform;
  var lastY = 0;
  var draggable = new Draggable(page, {
    type: "y",
    throwProps: true,
    overshootTolerance: 0,
    bounds: { minY: lastPage ? 0 : -snapDist, maxY: 0 },
    snap: {
      y: snapY
    onPress: function(e) {      
      currentDraggable = this;
      console.log("this.index = ", this.index)
      //you can check the index of the currentDraggable globally like
      console.log("currentDraggable.index = ", currentDraggable.index)
    onDragStart: function(e) {
      lastY = this.pointerY;
    onDrag: onDrag,
  //give each draggable an index
  draggable.index = index;
  function onDrag(e) {
    if (this.pointerY > lastY) {
      if (pos.y < 0 && currentDraggable == this) {
      if (index - 1 > -1) {
        var dragger = draggables[index - 1];
  function snapY(y) {
    if (lastPage) {
      return 0;
    return round(y, snapDist);    
  return draggable;
  • Like 3
Link to comment
Share on other sites

  • 5 weeks later...

Yes i will try do this option if the problem resolve.

But i dont know if this option resolve this problem, because i don't want to know the last or first per page, because i resolve that problem. 


The problem i have is when you try move the element in mobile up or top very fast the draggable do some error in Y don't have position. that what i try resolve and maybe with index i can resolve.


Thanks ;)

Link to comment
Share on other sites

The error happen in draggable i can't find solution, maybe because the snapY funtion, the post is hide on top if i try move down and And without press letting go move to up again like swipe but the finger press and drag, the draggable plugin dosen't work because don't detect the some variable error in image i send before.

I really try everything and nothing change. :(

Link to comment
Share on other sites

Hey cleveradvertising,


Could you share a reduced case demo of your code? You linked to a CodePen at the start but that's Blake's pen, I am supposing your pen is already significantly different from Blake's. It would help to see what you are doing differently. Also, it might be that what Blake has on is his pen is not suitable to what you are looking for.



Link to comment
Share on other sites

Some of my code from that original post seems to be broken.  :x


You used to be able to drag the previous page down.


I think the problem is that PointerEvents were just added to Chrome 55, and that is messing stuff up. This is something @GreenSock may need to investigate. There was an update to Draggable posted here...



... but it doesn't seem to fix the issue.  :unsure:



Link to comment
Share on other sites

This was a tricky one to track down, but here's what I found:

  1. Chrome's pointerEvents addition makes it look like a touch-enabled device (which it kinda is in some cases), and touch devices typically scroll via touch (swiping your finger) rather than mousewheel. In cases where you've got a one-dimensional Draggable (like type:"y" or type:"x"), it tries to be helpful by allowing native touch scrolling in the OTHER direction, thus it essentially locks down that axis. This is critical because if you want to permit touch-scrolling, Draggable CANNOT call preventDefault() on the pointerEvent (because the default action is to scroll in that case). It waits just long enough to determine the direction you start swiping and then handles things accordingly.
  2. In your example, Blake, you had an onDrag function that had logic in it that controlled the back-swiping. However, onDrag technically should only get called when dragging occurs (the target moves) but you had a snapping behavior that would prevent that. So onDrag was [correctly] not being called but in the old (non-pointerEvent-enabled) Chrome, it did call onDrag when you moved along the x-axis. Technically I'd call that a bug :) So as odd as it may sound, the new behavior is the "correct" one. If you want your demo to work, I'd suggest just reworking that one piece of the logic so that it's not dependent on onDrag getting called even when no dragging occurred. Maybe add a "mousemove"/"touchmove"/"pointermove" event handler onPress, and remove it onDragEnd.

I want to make sure that any bugs related to Chrome's new pointerEvent behavior are resolved, so could you please direct me to any other demos that appear to be broken?


And please use the updated [beta, uncompressed] Draggable: testing.

Link to comment
Share on other sites

Hmmm... sounds like I might have to change a lot of stuff around.


How long does it wait to determine if it's scrolling?


And do these changes have anything to do with passive event listeners? I just heard about those a couple of weeks ago, and was curious if they are related to the pointer events.





Link to comment
Share on other sites

I hadn't even heard of the passive stuff, no. And from what I gather, it wouldn't apply here anyway because that's just for scrolling and when you're promising the browser that we'll never call preventDefault() on a start/move/end event (but we pretty much ALWAYS call preventDefault() in order to permit dragging, otherwise the page would scroll instead). 


To answer your question, there isn't really a time limit for sensing the direction - it's an amount of pixels. On most devices it's 3 pixels, but on Android devices we're kinda forced to do it on the very first touchmove event because otherwise Android refuses to play nice. 

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