ion-item-move (altering items while re-ordering)

[sfinktah]

Issue number: #27614

---

What is the current behavior?

ion-reorder-group (reorderable lists) only emit upon completion

What is the new behavior?

ion-reorder-group emits an ionItemMove event during dragging of a reorderable list item. This event is similar to that dispatched for ionItemReorder, except it includes a "detail.lastTo" property and excludes the complete callback.

<ion-list class="">
    <ion-reorder-group 
        :disabled="false" 
        @ionItemMove="handleMove($event)" 
        @ionItemReorder="handleReorder($event)">
          <MessageListItem @click="onclick" v-for="(message, idx) in messages" :nokey="message.id" :idx="idx" :message="message" />
    </ion-reorder-group>
</ion-list>

Does this introduce a breaking change?

• [ ] Yes
• [x] No

Other information

Required additions to test code and documention await "approval in principle", and requests to change event or poperty names.

Eye candy

Demonstrating how this PR allows for the dynamic alteration of a list item's properties "in-flight"

[bolt-new-by-stackblitz[bot]]

Run & review this pull request in StackBlitz Codeflow.

[liamdebeasi]

Thanks for the PR! Is there a feature request associated with this code change? If not, could you please create one?

[sfinktah]

Thanks for the PR! Is there a feature request associated with this code change? If not, could you please create one?

No problems, have created https://github.com/ionic-team/ionic-framework/issues/27614 and updated PR description.

[liamdebeasi]

As I noted in https://github.com/ionic-team/ionic-framework/issues/27614#issuecomment-1584533577, we think this is a good feature to add to Ionic. The next steps on the Ionic Team's end is to create a design document for how this feature is going to work. This ensures that we build an API that scales well and is easy to use. Once the design document is done, someone from the team will provide feedback on the PR and request any changes. Let me know if you have any questions.

[sfinktah]

@liamdebeasi No problems, there is definately some discussion that should be taking place. You may have noted (if you viewed my demo at https://ionic-list.nt4.com/ that I added a bit more to your standard reordered list to make it passably "iOS like".

Namely the 104% scale of the item being moved in the list, along with the transitions either side of that event

I also had (in the case of a user clicking an option) to visually present the appearance of items moving position with matching transitions.

None of that required any changes to code (hence, no PRs), though I had to fight some rather poor CSS !important styling and such.

There is definately room for improvement in the design there, and possibly with the way background colors are handled for lists in general, though I'd want to document that more thoroughly before comitting myself.