Unable to scroll if dragging is enabled on the screen

[Senthilkumar]

Idea:

The attached codepen project has a list of elements occupying the entire screen and are stacked vertically. Each of the element acts a trigger for dragging a new element from one row to other. Say for example, consider each row is some bank account, and on press and drag, a coin or some kind of element appears which cane be dropped on another row. Also, if there are more number of accounts than the viewport, then we should also be able to scroll. 

 

Problem:

Dragging and dropping the new element is achieved. But now the viewport got locked and it is not scrollable as the draggable is binded to it.

Also, I have used Hammer.js to capture the tap event on the row, which is not firing. I want to use hammer because I want to use other gesture on the row

 

P.S :  The X and Y position of the draggable element is not proper, sorry for that I am fixing it.

 

@GreenSock Please help me with a solution for this issue.

See the Pen YzzLVjK by senthilk20 (@senthilk20) on CodePen

[GreenSock]

I don't really understand the question, but this sounds like it may be a very advanced case that isn't easily attainable (though, again, I'm very fuzzy on what you're trying to do). 

 

You're changing the position of the element out from underneath Draggable, throwing off its internal recordings. Try adding this.update() inside your onPress() handler to force it to re-calibrate. 

 

I'm not sure what to tell you about Hammer.js - I've never used it. 

[ZachSaucier]

8 hours ago, Senthilkumar said:

now the viewport got locked and it is not scrollable as the draggable is binded to it

I don't see this behavior in the demo that you provided. Does it not work for you?

[Senthilkumar]

@GreenSock Sorry for the explaining the use case in a complicated way. I am very new to greensock. Thanks for the update logic I will incorporate that in the pen.

 

Use case :

It is a very simple use case. You have a list of tiles which are stacked vertically. On press or on hold of the tile, I need to create a new element say for example a box or some thing, that can be dragged across these tiles. 

 

What I have achieved:

I am able to achieve the creation of new element on press which can be dragged across the tiles. I have used the trigger attribute in the reachable options to achieve it.

 

Problems facing:

If I simply want to scroll the list of tiles then draggable is blocking as the entire tile is configured as trigger. You can find the draggable configuration in the codepen url.

[Senthilkumar]

@ZachSaucier Hi, thanks for looking into this issue. I am quite new to this library. Sorry for the mistakes.

 

I made mistake in updating the position of the draggable element but apart from that the code pen works as expected