Ionic-framework: Reordering list item out of visible area does not work

[ggravand]

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[X] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request

Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
In an ion-list with reorder="true" I have enough elements that the list must be scrolled to see all elements. I drag an element in the list below the bottom-most visible element. The element jumps back to the starting position.

Expected behavior:

I would expect the list to scroll and allow me to drag the element below the bottom most visible element, ie into the currently invisible area that should be scrolled into view while dragging. And vice versa for the topmost element.

Steps to reproduce:

Add enough elements to a list and drag an element below the lowest visible element (or above the topmost visible element if scrolled down):

<ion-list reorder="true">
  <ion-item *ngFor="let item of items">{{ item }}</ion-item>
</ion-list>

Tested on iOS.

Related code:

insert short code snippets here

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

```

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.13.1
ionic (Ionic CLI) : 3.13.2

global packages:

cordova (Cordova CLI) : 7.0.1

local packages:

@ionic/app-scripts : 3.0.1
Cordova Platforms  : browser 4.1.0 ios 4.4.0
Ionic Framework    : ionic-angular 3.8.0```

[kensodemann]

Hello! Thank you for opening an issue with us! Would you be able to provide a sample application via GitHub that demonstrates the issue you are having?

Your sample code above is insufficient on its own to troubleshoot the issue. For example, it does not show how you are handling the ionItemReordered event (actually, based on the code you have above, it would appear that you are not handling it, which is probably your issue, but I would like to be sure of that before saying anything definite.

See our documentation for an example of one way of handling that event (may or may not be appropriate for your project).

Thanks for using Ionic!

[ggravand]

@kensodemann Thanks for your reply. I have created an example here: https://github.com/ggravand/ionic-13333

With this simple example, the behaviour is a bit different than in my more complex setup where I first saw the issue: Now I see no jumping back to the start position as I wrote in the description but the basic problem is the same that you cannot move the item out of the visible area. Is this by design? I found this post in the meantime from somebody who had a similar need and gave up: https://forum.ionicframework.com/t/how-do-i-scroll-a-list-when-using-drag-and-drop/100402/4

I will try to reproduce the jumping around part as well, it might be related to a footer bar I have in the other example. Note that I don't suspect the reordering function to be an issue as everything works fine within the visible area.

[ggravand]

I have now reproduced the jumping item behavior:

1. add enough elements to the list to go beyond the visible area (the more items outside the visible area, the worse the problem)
2. scroll to the bottom
3. drag the bottom-most item to the top of the list - when your finger reaches the titlebar area (and still dragging), the dragged item "jumps" a number of items down corresponding to how many items you had in the list outside the visible area

To explain "jump" a bit more: The dragged item visually is moved down and floats over the list while the list reacts to the drag action where your finger are (moving other items around your finger as expected when dragging in a list, just with the odd jumping item floating some places below).

It is a bit difficult to explain but easy to reproduce. The github repo above (https://github.com/ggravand/ionic-13333) can be used - but reduce the items added in the example, it uses 50 items, making it difficult to see what happens as the items jumps so many places. Use 15 or so.

The jumping behavior also occurs the other way - if attempting to drag an item from near the bottom of the list all the way to the bottom of the list.

[everettglovier]

I just wanted to jump in because I am having the same issue. When reordering the last item of a list that requires a scroll, the item will "jump" away from the cursor. The reorder still functions normally, but the actual element that is being dragged is offset.

[ggravand]

Any updates on this, especially related to timeframe for a fix?

[ionitron-bot[bot]]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/896