Draggable autoScroll problem

[ucraft.me 0 Likes (Newbie)]

Hello

 

We are creating drag and drop website creator called ucraft.me and we are using GreenSock draggable. Everything is working except one thing.

Our system is working like this:

We have different areas where we can drop new objects.

When dragging(and holding) is starting (on dragStart) the system must generate additional height of the page, which adds more scroll to my browser.

 

Now we should be able to drop the held element on the top of the screen as well as on the bottom of the screen. As my page height was changed before, the bottom area is more down and is unreachable for me during the holding process as GreenSock autoScroll is not letting me to get there. It seems that GreenSock doesn't know the new generated page height.

 

Please help!

 

Best,

Ash.

[Jonathan 5,176 Likes (Superhero)]

Hello ucraft.me, and Welcome to the GreenSock forum!

 

Could you please set up a reduced codepen demo so this way we can see your code (css, js, html) in context and in a live editable environment?

 

Here is a nice video tut by GreenSock on how to create a codepen demo:

 

 

Thanks

[GreenSock 8,117 Likes (Superhero)]

Like Jonathan said, it'd be great to see a reduced test case, but if I understand your question correctly, what you're trying to do is not currently possible. Draggable loops through all of the ancestor containors and calculates/records maximum scroll values for each on as soon as you "press". It definitely wouldn't be good to constantly re-analyze those while dragging because it'd hurt performance quite a bit. However, we could consider adding a method that'd allow you to tell Draggable to re-run that logic (and re-record all those max scroll values on-demand). Is that what you're looking for? 

[ucraft.me 0 Likes (Newbie)]

Yes that is exactly what we are searching for This will fix all our problems. So after changing heights we will call that method and all height will be recalculated.

 

I have created

See the Pen adOoGg by anon (@anon) on CodePen

also to reproduce this.

 

Thanks

[GreenSock 8,117 Likes (Superhero)]

Okay, I made several adjustments which should make it as easy as calling update() on your Draggable instance when you want to force an update of the recorded values. See the codepen:

http://codepen.io/anon/pen/ZQGLXz

 

Notice it's linking to a preview of the upcoming release of Draggable:

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js

 

Is that what you're looking for? 

[ucraft.me 0 Likes (Newbie)]

This has done a thing

 

This version is not released yet? We are using bower and there is no update yet. But I have tested by replacing the bower js and everything worked.

 

Thank you very much!! 

[GreenSock 8,117 Likes (Superhero)]

It's not released yet. We hope to release within the next week  

[ucraft.me 0 Likes (Newbie)]

I think there is a small issue that needed to be fixed after this changes.

 

So my problem with new version is that after disable() than enable(), onDragStart() is triggering.

 

I have looked and debugged and found this:

at the end of enable function there is an update call and in update we have this new lines for fixing my issue and it is causing this issue.

if (self.autoScroll) {
   recordMaxScrolls(target.parentNode);
   checkAutoScrollBounds = true;
   render();
}

after enable() render() is called.

render function leads to setPointerPosition function and at the end there is

if (!self.isDragging) {
    self.isDragging = true;
    _dispatchEvent(self, "dragstart", "onDragStart");
}

So after enable(), _dispatchEvent(self, "dragstart", "onDragStart") this is called. This is harming my system because onDragStart I am changing some flags which are used in other places and like onDragStop is not triggering also so that flags are remaining.

 

I don't know if this should be another topic, if so I can create.

 

Thanks

[Diaco 1,948 Likes (Superhero)]

Hi ucraft.me 

 

as Jonathan mentioned ,  pls make a reduced Codepen Demo available .

[GreenSock 8,117 Likes (Superhero)]

I think I see what you mean. Is this better?: 

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js (uncompressed)

[ucraft.me 0 Likes (Newbie)]

Yes I think this solved the issue with dragStart.

 

There is also positioning problem.

 

It can be reproduced in prev codepen http://codepen.io/anon/pen/ZQGLXz

 

1. Drag element to the end of scroll

2. when you drop scroll is jumping up, than scroll up find element and try to drag it

 

element is gone (its coordinates top is not calculated correctly)

[GreenSock 8,117 Likes (Superhero)]

Aha, thanks for pointing that out. I believe it's fixed in the upcoming release which you can preview [uncompressed] here:

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js

[ucraft.me 0 Likes (Newbie)]

Now everything is working

When you plan to release?

[GreenSock 8,117 Likes (Superhero)]

Not sure quite yet. You're welcome to use that preview version I linked to in the mean time. 

[ucraft.me 0 Likes (Newbie)]

Hey

 

Any news on version update?

[GreenSock 8,117 Likes (Superhero)]

Oh, sorry, I believe this is already in the released version that has been in the wild for a few weeks. I forgot to post a note here in this thread.