Draggable strange behaviour

[Bertrand Larrieu]

Hello, 

 

I'm currently working on a project in which I'm using Draggable.

 

In my page, I have some classic content  (colored pattern) and a fixed div in front of everything, in which I have my draggable (hexagons). When you're interacting with the draggable, I want the content of the page (colored patten) to be moved accordingely, so I update window.scroll on each tick with a ratio calculated from draggable.y. 

 

It works perfectely when you use the scroll button, the track pad or the scrollbar. But when you drag the draggable itself, or touch for instance, it goes crazy and draggable.y takes the min or max value randomely.

 

Here is the codepen demonstrating the issue :

 

Let me know if the problem is clearly enough explained.

And any help is more than welcome, I might be messing with Draggable internals here.

 

Thanks and have a good evening

Bertrand

 

 

 

 

 

 

See the Pen JXpKjx by lab9 (@lab9) on CodePen

[jimeast]

I changed scrollTo  to dragTo and it worked better.

[Bertrand Larrieu]

Hi Jimeast,

 

Thanks for your answer.

 

Do you mean replace window.scrollTo by window.dragTo ?

I don't see this dragTo function

[jimeast]

line 21         I forked his pen and changed window.scrollTo(0,r*m) to window.dragTo(0,r*m)  it appears he's done the same.  It was just a guess but it seemed to work now I'm wondering if window.dragTo is even a real command.

 

10 min later I copied the code onto my system and sure enough there's no such thing as "window.dragTo"  I set it back to window.,scrollTo and the console no longer reports an error but the original problem is back.  The whole tick() method is new to me and I'm out of my league here.  I just thought I made a lucky guess and I'm not clear on what he's trying to accomplish.

[Bertrand Larrieu]

I tested window.dragTo on the codepen, but it does not work anymore, the content is simply not scrolled.

 

 

I've played a bit with Draggable and found out how to solve my problem :

 

in onPress :

startPointerY = self.pointerY = e.pageY - window.scrollY;

in onMove

setPointerPosition(e.pageX, e.pageY - window.scrollY);

This way, even if window.scrollY is modified during drag, it keeps the correct start pointer.