Making the whole ion-item in an ItemReorder dragga

2019-06-22 11:08发布

问题:

In my application I've got an ItemReorder as described in the docs:

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

It works as intended, I can drag the ion-items by pointing at the reoder icon (see freehand circle):

Testing with potential users on a tablet I found out, many users don't see the icon at first and/or try to drag the ion-item without pointing at the icon. They expect the whole ion-item to be draggable:

How can I implement this? Any insight is appreciated!


I've already checked the docs twice, googled and found this unanswered question on the ionic forum and this plugin for Ionic v1. I also scanned the code on Github without success.

回答1:

        The ideea of this css solution is to have the reorder icon invisible above the zone which you want to reorder. I have changed the icons to be on the right side <ion-list side="start"  and I have changed the css like this 

Now for me it's working.

        ion-reorder{
            position: absolute;
            width: 22%;
            max-width: 100%;
            opacity: 0;
        }

The cons is that there is no more visible reorder icons.