Axure教程:列表拖动排序(中继器实现上下拖动)

最近使用Axure过程中碰到要对列表做排序,自然想到的是用中继器来实现。看了这篇文章《Axure教程:列表拖动排序的实现方式》 受到了不少的启发,但是只能向上拖动毕竟不太好,经过研究发现还是有办法实现上下拖动的。

我使用的是Axure RP 9,如果是Axure RP 8原理上基本相同。

产品经理,产品经理网站

一、原型原理

要进行拖动排序,主要是计算拖动到达的位置处于整个列表的相对位置,再进行插入。

二、思考过程

要进行拖动,就要使用动态面板。

动态面板放在中继器里可以很容易的获取到中继器里的数据

但是如果直接拖动动态面板,就会像上面提到的文章一样,只能往上拖动,往下拖动会把排在下方的条目往下推,达不到排序的目的。

这里只需要将被拖动的元件放在中继器外,拖动过程中将中继器里的数据放在被拖动的元件上即可!

三、动手实现

01

中继器

我们先拖入一个中继器,在正常的数据以外增加一列标题为OrderNumber

Name列填入A ~ E

OrderNumber列填入0 ~ 4

中继器内矩形长宽改为200*40方便点击拖动

再对中继器添加一个载入时按照OrderNumber升序排序

产品经理,产品经理网站

产品经理,产品经理网站

02

将中继器里的元件复制一份放在中继器外,取名“拖动块”,并设置载入时隐藏。

03

中继器外面放一个按钮,主要用来触发排序和整理OrderNumber,也设置为载入时隐藏。

产品经理,产品经理网站

04

在中继器里放入一个动态面板,用来触发拖动。

05

下面我们就来设置动态面板上的互动:

1)拖动开始时

  • 设置拖动块的文本为[[Item.Name]]
  • 移动拖动块“到达”所鼠标所指向的条目的位置,通过OrderNumber来计算即可(X坐标为 中继器的x坐标;Y坐标为 中继器的y坐标 + 该条目的序号 * 每个条目的高度)
  • 显示拖动块

产品经理,产品经理网站

产品经理,产品经理网站

2)拖动时,移动拖动块跟随拖动

我这里并没有添加边界,如果需要也可以添加上。添加边界要注意一个地方,y轴上要留出空间,允许拖动到第一个条目的上方。

产品经理,产品经理网站

3)拖动结束时

  • 计算中继器和拖动块y坐标的距离来确定OrderNumber,值为 [[(LVAR2.y-LVAR1.y)/40]]

产品经理,产品经理网站

  • 触发中继器外的按钮

产品经理,产品经理网站

  • 按钮单击时 将中继器的OrderNumber列更新为[[TargetItem.index-1]]。

OrderNumber用来排序的同时,也用来计算拖动块出现的位置,所以拖动一次后就要更新为0 ~ N-1的整数,TargetItem.index是从1开始,所以要减1。

被更新的行的顺序就是当前排序的顺序,所以这样更新不会改变当前的排序。

规则写的是true,在实际使用中可以用其他条件,比如该行的可见性等条件来更新。 经测试,中继器筛选不显示的行,不会被更新OrderNumber。

产品经理,产品经理网站

  • 移动拖动块到达排序后的位置

产品经理,产品经理网站产品经理,产品经理网站

  • 将移动的过程添加一个200ms的动画

产品经理,产品经理网站

  • 等待200ms后把拖动块隐藏起来,整个拖动排序就完成了

产品经理,产品经理网站

效果完成了,我们还可以在中继器里的条目上,加入一块相同尺寸的75%不透明度的矩形,拖动开始时显示,拖动结束时隐藏,再加上文字提示可以拖动排序,页面的效果就能更拟真。

产品经理,产品经理网站

写在最后

有人说也就几条注释或跟技术人员几句话就能交待过去,何必花功夫去模拟这个效果 。但如果时间允许,我们我们还是应该尽量将页面效果用最直观的方式表现出来,方便跟客户展示,也方便设计师、程序员查看。

 

本文作者@Goffe

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部