起点学院课程

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

6 评论 2119 浏览 11 收藏 7 分钟
15天0基础极速入门数据分析,掌握一套数据分析流程和方法,学完就能写一份数据报告!了解一下>>

本文将为大家介绍如何用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 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
起点学院课程
评论
评论请登录
  1. 哦 排序 可以这样 我说的是拖动替换的效果了

    回复
  2. 我仔细看了下 这个只设置了被拖拽之后的item的 num值,那目标位置原来的item 的num值没有更新?这样直接排序的话会有问题,例如将 D-》B, num值从 01234 -> 01214 排序之后 01124 就是从 ABCDE ->ABDCE 但是要的效果应该是 ADCBE ,所以要在更新D的num值为1的同时更新B的值为3才对。

    回复
  3. 老师您好,附件中的原型文件不能进行排序呀

    回复
    1. 我还特意去下载一下,能排序啊,或者你看看https://i50lcz.axshare.com

      回复
    2. 突然想到Axure的汉化版本不对容易引发排序无效的问题,可以看看把Axure rp9\lang目录下的default文件删掉用英文版来预览看看

      回复
  4. 原型文件:
    链接:https://pan.baidu.com/s/1-D3tDBg-GAE9PKxiHLxPjA
    提取码:1b89

    回复