Reorder List on Child View

demo
1

Hi there!
I’ve been working on this demo of a reorder list that is embedded on a child ion-nav-view.
I hope you enjoy it!

See the Pen Reorder List Child View by Alan Accurso (@aaccurso) on CodePen.

1 Like
2

By the way, I opened an issue regarding the poor usability of list reordering feature.
You can view it here https://github.com/driftyco/ionic/issues/2113
Basically, I’ve tested with various users and they don’t seem to realise how the list will get ordered when they drag an item since there is no ‘preview’ showing how the list order will become when I drop the item.
A solution would be to move the previous and next items around the dragged item to simulate the resulting list order.

3

@max would you give me some ideas to improve this please? :smiley:
Thanks!

4

I wouldn’t say the usability is “poor” but I think it would be great to have the reorder mimic the favorites tab in the phone app for ios7 (havent downloaded ios8 yet so im not sure if there is an “ios8” look and feel for this now). The only difference I see between ionic beta 12 and ios7 is

  1. If you reorder up for example (opposite applies for down) once you cover 50% of the next item, the item above slides down one index into place.
  2. Once you let go of the list item, theres an animation that will smoothly snap the item into place on the index.
  3. The bottom border of the placeholder is a little bit darker with a little more shadow.

Again I am going off of ios7 so this is neither right or wrong, but I do think these points would improve the UX even though all are cosmetic :slight_smile:

1 Like
5

I think an improvement would be to target the previous and next items while the element is being dragged and style them somehow to let the user know how the list order will get. Is this possible with Ionic reorder? I didn’t see any classes added to the other elements of the list. I would be happy to implement it but I ask for a little help :smiley:
Thanks!

6

It looks as if the ionic team has plans for reording the list as the placeholder is dragged, I just saw a line commented out in the ReorderDrag drag function

// this._reorderItems();

The Jquery UI sortable plugin reorders the list items as you drag and also has a “revert” option which if set to true will apply the smooth animation which will put the item in the correct place when released. To implement this plugin you will also need a directive (or the angular ui sortable plugin) as well as jquery touch punch to activate touch events.

Unfortunately for me the jquery plugin is not a good solution as I would like to take advantage of the ionic list/scroll/reorder/delete/option item features. I would dig in the code further and try to figure out how to implement the rearrange and animated drop but I just dont have the time.

1 Like
7

Thanks! I’ll look into it.

8

Is there a way to show the re-order button without the content shifting to the left? The above example has icons that are not visible because they are shifted to the left. In general lists have text on the left and it is hard to re-order when the text gets shifted to the left and you no longer can see the values. It seems like wherever I put the ion-reorder-button element in the item it is always displayed on the right side.

I am trying to use it to display a dialog that lets the user specify the sort order for a list of items rather than entering a “re-order” mode.

1 Like
9

I think I don’t understand your use case. Have you tried with:

.list-right-editing .item-right-editable .item-content {
  transform: none;
}

Can you build a fiddle to show us the problem?