使ItemReorder中的整个离子项目可拖动

问题描述

在我的应用程序中，有一个

与潜在用户进行测试在我发现的平板电脑上，许多用户起初没有看到该图标，并且/或者尝试拖动 ion-item 而没有指向该图标。他们期望整个 ion-item 是可拖动的：

我该如何实现？

---

我已经检查过两次文档，在Google上搜索并找到和。我还扫描了 Github

解决方案

 此css解决方案的思路是重新排序要重新排序的区域上方不可见的图标。我已将图标更改为在< ion-list side = start右侧，并且已将css更改为
  

对我来说，它正在工作。

  ion-reorder {
位置：绝对； 
宽度：22％； 
最大宽度：100％； 
不透明度：0； 
} 
  

缺点是没有更多可见的重新排序图标。

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.

解决方案

        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.

这篇关于使ItemReorder中的整个离子项目可拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！