window scrolling on drag up or down causes cursor to lose it's position

[JaneCoder]

Hello,

I really love your projects. Thanks for these awesome frameworks. I'm actually using react-grid-layout, but my issue is in this dependent project.

I'm struggling with having large boxes to drag that require scrolling to drag vertically. The cursor loses it's position on the drag handle when scrolling and the user loses the ability to drag a card to the top, as their cursor gets to the top way before the card.

Thanks for any help with this.

PS, you can see the issue in the react-grid-layout showcase demo, but as the boxes are small, the cursor does not get that out of range. Increasing some box sizes and trying to drag large boxes with scrolling needed reveals the issue.

[STRML]

Hi @JaneCoder,

An update I pushed a few months back was built to address the issue of the window/body scrolling, but it is not yet generic enough to handle any scrollable ancestor.

At one point, a user put together a PR to address this, but the project changed significantly in the meantime and the PR was closed.

[dkozar]

Actually here's how it worked in action: http://youtu.be/FZ-L5x4E02k

:-)

Danko

On 11.04.2016., at 22:10, Samuel Reed notifications@github.com wrote:

Hi @JaneCoder,

An update I pushed a few months back was built to address the issue of the window/body scrolling, but it is not yet generic enough to handle any scrollable ancestor.

At one point, a user put together a PR to address this, but the project changed significantly in the meantime and the PR was closed.

— You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub

[JaneCoder]

Wow @dkozar that looks sweet in the video.

I have only 2 sprints left on my project with lots left to do. And being a c/java/ruby developer who is new to javascript and react, I'm not sure I can figure out how to code a fix in time.

But @STRML's grid is just awesome. I spiked on many and this was the best. Maybe I'll burn some midnight oil this weekend and try.

[STRML]

I'm working to fix this by not simply using clientX, but instead referencing the offsetParent to get a true reading of where the cursor is relative to the draggable's parent. We'll see - some success on body but still working on nested scrollable divs.

[dkozar]

That is the right approach. Current position should be a cummulative of all the offests of all the scrollable parents in the hierarchy.

Just make sure that you subscribe to all of these for scroll changes ;)

Danko

On 12.04.2016., at 00:04, Samuel Reed notifications@github.com wrote:

I'm working to fix this by not simply using clientX, but instead referencing the offsetParent to get a true reading of where the cursor is relative to the draggable's parent. We'll see - some success on body but still working on nested scrollable divs.

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub

[STRML]

I think it's easier than that! Going to push to master shortly, try the changes yourself.

[dkozar]

Looks promising! We would also like to enjoy this patch... Thanks for the effort :)

Danko

On 12.04.2016., at 00:17, Samuel Reed notifications@github.com wrote:

I think it's easier than that! Going to push to master shortly, try the changes yourself.

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub

[STRML]

@dkozar @JaneCoder Please try latest master - you can clone, npm install, npm run build, then npm link it into your project. Looks green on my end but would like to get feedback before I make a release.

[JaneCoder]

I'm still getting the cursor issue, but perhaps I'm not actually getting your changes properly, being pretty green. Is there a way I can tell if my project's version of react-grid-layout is using this version of react-draggable?

[STRML]

You'd have to npm link it into your local project and build it which can be a little hairy. It's easier if you're using npm 3 or declaring Draggable ad a top level dependency. On Apr 11, 2016 7:02 PM, "Karen" notifications@github.com wrote:

I'm still getting the cursor issue, but perhaps I'm not actually getting your changes properly, being pretty green. Is there a way I can tell if my project's version of react-grid-layout is using this version of react-draggable?

— You are receiving this because you modified the open/close state. Reply to this email directly or view it on GitHub https://github.com/mzabriskie/react-draggable/issues/151#issuecomment-208628145

[JaneCoder]

OK, thanks. I really appreciate what you've done here and your willingness to jump in and address the issue.

I'll try working on it more this weekend and hope to have some luck. Perhaps I have more than one problem; the vertical scrolling thing with my cards being so tall they fill the view height, and having links and other elements that respond to mouse-over on them. Cards appear to get stuck passing over each other on vertical drag and the cursor loses it's place.

I found in trials, that putting twitter widgets in boxes of the showcase demo causes vertical drag issues too, even when not needing the large amount of scrolling that my rather huge boxes need to drag vertically.

[STRML]

@JaneCoder @dkozar I've published this as 1.4.0-beta1 to make your testing easier.

[dkozar]

Great!

Sorry for me not being available for testing (planty of work vs sleep), but I guarantee that I'll be a number one user of the new release because the feature was really needed.

Danko

On 13.04.2016., at 22:52, Samuel Reed notifications@github.com wrote:

@JaneCoder @dkozar I've published this as 1.4.0-beta1 to make your testing easier.

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub

[JaneCoder]

Ah well, I'm finding on vertical drag the cursor is still getting away from the drag handle. Not seeing the floating to the top issue on horizontal drag now. I guess that was something I accidentally introduced.

OK, back to my drawing board. Thanks for all the work.

[JaneCoder]

I'm thinking that perhaps my grid is not really a good use case for react-grid-layout. Perhaps what I need is to work on a sortable solution. I've got rather large cards stacked deep in 2 columns of cards. This requires a lot of scrolling to do vertical sort. Perhaps I'm misusing the framework?

var layout = [ {i: 'a', x: 1, y: 0, w: 4, h: 10, isResizable: false}, {i: 'b', x: 6, y: 0, w: 4, h: 10, isResizable: false}, {i: 'c', x: 1, y: 11, w: 4, h: 15, isResizable: false}, {i: 'd', x: 6, y: 11, w: 4, h: 10, isResizable: false}, {i: 'e', x: 1, y: 27, w: 4, h: 10, isResizable: false}, {i: 'f', x: 6, y: 22, w: 4, h: 10, isResizable: false}, {i: 'g', x: 6, y: 33, w: 4, h: 10, isResizable: false} ];

<ResponsiveReactGridLayout className="layout" layouts={this.state.layouts} width={1200} rowHeight={43} cols={{lg: 12, md: 5, sm: 5}} >

[STRML]

@JaneCoder Could you check if your issue is resolved in 2.x?

[JaneCoder]

Seems to be a little better. And we've made the cards being dragged much smaller, which helped. I'm not sure there is anything that can be done to stop the 'hold spot' on the card from slipping away from the cursor when the page scrolls while dragging.

It's not perfect, but doable now I think. Thank you for your help.

On Thu, May 19, 2016 at 12:50 PM, Samuel Reed notifications@github.com wrote:

@JaneCoder https://github.com/JaneCoder Could you check if your issue is resolved in 2.x?

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/mzabriskie/react-draggable/issues/151#issuecomment-220384883

[STRML]

Hmm. Technically the position should be fine while the page scrolls - at least, in the demo, it is. But React-Grid-Layout is not using draggable v2 yet.

[JaneCoder]

Ah that must be it! I thought if I loaded version 2 with npm --save to update my package.json that react-grid-layout would pick it up. Is there a way I can force it to do that? And I can't thank you enough for this update :)

On Thu, May 19, 2016 at 2:20 PM Samuel Reed notifications@github.com wrote:

Hmm. Technically the position should be fine while the page scrolls - at least, in the demo, it is. But React-Grid-Layout is not using draggable v2 yet.

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/mzabriskie/react-draggable/issues/151#issuecomment-220409214

[JaneCoder]

Demo looks great. I believe this is solved.

[STRML]

Great - I still have not updated RGL yet to v2 but am almost done with the conversion. We will enjoy quite a few bug fixes once it lands. :)

[choenes]

Actually here's how it worked in action: http://youtu.be/FZ-L5x4E02k

:-)

Danko

On 11.04.2016., at 22:10, Samuel Reed notifications@github.com wrote: Hi @JaneCoder, An update I pushed a few months back was built to address the issue of the window/body scrolling, but it is not yet generic enough to handle any scrollable ancestor. At one point, a user put together a PR to address this, but the project changed significantly in the meantime and the PR was closed. — You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub

@JaneCoder Could you check if your issue is resolved in 2.x?

@STRML I'm not sure what I'm missing but using 2.2.6 the demo page doesn't scroll the document if I drag a draggable off page like the youtube video links show here.

[morgs32]

I'm struggling with this too. @choenes Did you get anywhere? Maybe I could pick up where you left off?

[Spiderixius]

Heya friends. Is it possible to disable the scrolling when I drag my element to the bottom/top?