dragging to edge of viewport causes window to start scrolling

[Ilginy1]

When a dijit.Dialog or dojox.Floating Pane is dragged out of the main window (viewport) the current view starts scrolling in the opposite of the moving direction.

For example:

Move dialog to the right and cross right window edge => window content starts to scroll to the left.

Move dialog down and cross bottom window edge => window content starts to scroll to up.

This problem is also stated in dojo forum:

​http://o.dojotoolkit.org/forum/dijit-dijit-0-9/dijit-support/dialog-problem-window-underneath-starts-scrolling-when-dialog-mo

This can be easily fixed by disabling dojo.dnd.autoScroll call in ../dojo/dnd/Mover.js

I can provide our simple patch in Mover.js if you are interested

[bill]

Hmm, it sounds like the change should be to dialog, rather than mover? We want this functionality in general.

If you've signed a CLA then please provide a patch of what you are thinking of.

[Ilginy1]

No actually we only made the patch to Mover.js
It is simply based on disabling dojo.dnd.autoScroll call
Yes I do have a CLA and attached you can find the patch.

[bill]

OK thanks for the patch... that dojo.dnd.autoscroll() code is there for a reason though (like when you are trying to reorder nodes in a tree and you need to scroll down in the viewport to get to the drop point), so I don't want to disable it altogether.

Maybe can find some way to disable it just for Dialog though. Eugene, any ideas?

[bill]

I think there are three separate issues conflated here:

1. request to disable auto-scroll when (while dragging the dialog) mouse is near top or bottom edge of the viewport
2. from the forum post, request [for option] to restrict dialog dragging within bounds of viewport, using constrainedMovable
3. some other issue I see when moving the mouse to the right; even when autoscroll is disabled, having the dialog at the right makes the document wider, showing a horizontal scrollbar. Not such a big issue.

I have a patch for #1 which I'll attach, although I'm not sure I should check it in, maybe the auto-scroll is actually useful when there's a Dialog? In any case I don't see how the current behavior is a problem, maybe you can explain?

For #2, I don't see the urgency either, actually being able to move the Dialog partially off-screen is often important so the user can see the content behind the dialog.

As for #3 that doesn't seem important.

So, I'll leave this open to consider for 1.6, but will likely close as wontfix.

[bill]

disables auto-scroll just while Dialog is being dragged

[dreddy]

Replying to bill:

I think there are three separate issues conflated here:

1. request to disable auto-scroll when (while dragging the dialog) mouse is near top or bottom edge of the viewport
2. from the forum post, request [for option] to restrict dialog dragging within bounds of viewport, using constrainedMovable
3. some other issue I see when moving the mouse to the right; even when autoscroll is disabled, having the dialog at the right makes the document wider, showing a horizontal scrollbar. Not such a big issue.

I have a patch for #1 which I'll attach, although I'm not sure I should check it in, maybe the auto-scroll is actually useful when there's a Dialog? In any case I don't see how the current behavior is a problem, maybe you can explain?

For #2, I don't see the urgency either, actually being able to move the Dialog partially off-screen is often important so the user can see the content behind the dialog.

If you drag the dialog out of the window by the top, then you loose the dialog handle bar, so you cannot, then, rely on it to get back your dialog into the viewport. I attach a screen capture.

[dreddy]

Screen capture of the lost dialog

[dreddy]

The dialog must have the same behaviour than the Jquery's dialog ​http://jqueryui.com/demos/dialog/ or the YUI's dialog : ​http://developer.yahoo.com/yui/examples/container/panel_clean.html

[bill]

@dreddy: yes, that's a bad thing, and is filed as #12238.

[bill]

#14696 is a duplicate of this ticket.

[bill]

Changing category since this is an issue with DnD in general, reproducible via dojo/tests/dnd/test_dnd.html and dojo/tests/dnd/test_moveable.html.

I have a fix.

[bill]

In [29048]:

Don't auto-scroll past the edge of the document. Still allows part of the dragged object (although not the cursor) to be moved past the edge of the document. Fixes #9024 !strict.

[kblcuk]

Feels like this isn't fixed completely for dojox.layout.FloatingPane? in 1.8.3 -- if you drag object to edge of the screen, release it, and then start dragging it again, it increases size of the window, and starts scrolling outside it. This can be seen in here, for instance: ​http://download.dojotoolkit.org/release-1.8.3/dojo-release-1.8.3/dojox/layout/tests/test_FloatingPane.html

[bill]

I guess it depends what you mean by "this". The problem you are describing sounds like FloatingPane needs the fix done to Dialog in [25306]. You can file another ticket for that if you like, if there isn't one already. Fair warning though: no one is maintaining FloatingPane.

[bill]

The workaround to this issue (for dojo versions <= 1.7) is to disable auto-scroll altogether:

dojo.dnd.autoScroll = function(){ };

Or if you need auto-scroll, then just temporarily disable auto-scroll when the dialog is shown, and then restore that method afterwards.

I looked at backporting this change to 1.7 but it's a little large, so I want to avoid doing that if possible.