Ionic: Any way to implement drag-and-drop component reordering non-vertically?

user_4858233 0
Viewed 890

Ion Reorder seems to depend on a vertical list orientation by default, allowing you to reorder items up or down. I want to display a list of Ion Chips displayed in normal horizontal text flow with normal line wrapping.

Example:

<IonContent>
    <IonChip>Item 1</IonChip>
    <IonChip>Item 2</IonChip>
    <IonChip>Item 3</IonChip>
    <IonChip>Item 4</IonChip>
    <IonChip>Item 5</IonChip>
    <IonChip>Item 6</IonChip>
    <IonChip>Item 7</IonChip>
</IonContent>

Can Ion Reorder be used to do drag-and-drop of chips in this orientation? Or is there another easy way to do this?

ionic4 ionic-framework javascript
1 Answers

Ion Reorder is a specific drag-and-drop implementation with specific rules and format. You can just use a drag-and-drop library like dragula.

https://valor-software.com/ng2-dragula/

Once you install it, you can create draggable chips as simple as that:

<ion-content>
  <div dragula="MY_DRAGULA">
    <ion-chip *ngFor="let chip of chips"><ion-label>{{chip.name}}</ion-label></ion-chip>
  </div>
</ion-content>

The above is an example using Ionic with Angular. From your example, I suppose you use React. I don't use React, however, I see that there is a React version of dragula as well.

https://github.com/bevacqua/react-dragula

Hope this helps!

user_75121140
Related