Skip to content

bug: Dragging when Reordering doesn't auto-scroll down #12769

@juanitotaveras

Description

@juanitotaveras

Type: bug

Ionic Version: 3.x

Platform: mobile webview

Expected Behavior:
When I need to drag an item to the end of the list, which goes below the viewing area, the page should scroll down so I can find the position in the list where I want to place my item. Similarly, the screen should scroll up if I want to drag the item to a position above the viewing area.

Actual Behavior:
The screen does not scroll down upon nearing the edge of the screen with the item you are dragging. The screen scrolls up when nearing the top edge if you are not already at the top of the list, but it scrolls all the way to the top and does not let you insert an element into the middle of the list.

Attempted Fix:
I have attempted to install the Dragula module, but it does not have an autoscroll implementation. I attempted using dom-autoscroller to remedy this, but I was not able to get it to scroll the window. I then wrote a function that drags the item if it's at the edge of the screen (detected using Dragula's method .out()) and the object position is at the bottom half of the screen. It looks fine on my computer, but not good on touchscreen devices. It registers a regular scroll up as if you're trying to move your item, and it's not easy to add a delay to register the drag. This behavior was exhibited on two touchscreen devices.

Suggested Fix:
The already included Reorder feature does what I want it to do except for autoscrolling. I have looked at the sourcecode on GitHub and can see that some sort of scrolling is implemented in ionic/src/components/item/item-reorder-gesture.ts, but have not figured out how to modify it yet.

The current scrolling needs to be modified so it can call a setInterval when the top or bottom edge is detected to scroll up or down around 3% of the screen and continue to do so while the dragged item is still on the edge and we're not at the perimeter of the content area.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions