Opened 20 months ago

#15175 new bug

Scrollbar Position Changes On Drag Start

Reported by: A. Wells Owned by:
Priority: minor Milestone: none
Component: ui.sortable Version: 1.12.1
Keywords: Cc:
Blocked by: Blocking:

Description

When an item is dragged in a container with a scrollbar at maximum extent (we assume vertical in all cases for simplicity), at the offset, the scrollbar position moves backward an amount corresponding to the height of the helper/placeholder.

http://stackoverflow.com/questions/1735372/jquery-sortable-list-scroll-bar-jumps-up-when-sorting

http://stackoverflow.com/questions/9448574/jquery-ui-sortable-in-a-scrollable-container-scroll-position-jumps-when-sort?rq=1

This behavior is caused by the non atomic nature of making the helper absolute and then adding the placeholder in what is essentially a later time. When the helper is made absolute, the height of the container shrinks by the height of the helper (assuming that the height of the container is dynamic here). This results in the scrollTop value being set to a new, smaller maximum. When the placeholder is added, the height of container returns to its original height (yes, as long as the helper and placeholder have the same height, which we assume is the case), but the scrollTop value remains the same. The end result is the apparent movement of the scrollbar's position.

An appropriate fix would be to create an atomic switch of the helper/placeholder preferably via a CSS class addition or subtraction. However, this can be difficult to implement via the widget given the infinite variations of usage of the sortable.

As a quick and dirty fix, the scrollTop value of the container can be saved at the entry point of _mouseStart and reset to that value at the exit of _mouseStart. (For horizontal scrollbar usage, the scrollLeft value can be saved and restored.) This can be affected by extending the sortable widget with the appropriate _mouseStart modifications. This has worked well for me.

Change History (0)

Note: See TracTickets for help on using tickets.