使 ItemReorder 中的整个 ion-item 可拖动 [英] Making the whole ion-item in an ItemReorder draggable

问题描述

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

在平板电脑上对潜在用户进行测试时，我发现许多用户一开始看不到图标和/或尝试在不指向图标的情况下拖动 ion-item.他们希望整个 ion-item 是可拖动的:

我该如何实现呢?任何见解都值得赞赏！

<小时>

我已经检查了两次文档，谷歌搜索并找到 离子论坛上这个未回答的问题 和 这个 Ionic v1 插件.我还扫描了 Github 上的代码 没有成功.

解决方案

 这个css解决方案的想法是让重新排序图标在你想要重新排序的区域上方不可见.我已将图标更改为在右侧 <ion-list side="start" 并且我已经像这样更改了 css

现在对我来说它正在工作.

 离子重排{位置:绝对；宽度: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 中的整个 ion-item 可拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！