教大家用中继器实现列表拖动换位。 获赏10金币 基础教程

大马猴 超级版主 8月前 614

大家好,我是大马猴,又见面了,今天给大家带来一个列表拖动换位的教程。

话不多说,先看效果:

教程开始:
一、首先准备元件
1、列表一个,用于当做表头(用矩形拼也可以)。
2、中继器一个,用于当列表的内容(内容放几列随意,我用的是5列+1操作列)
3、拖动图标一个,然后给转换成动态面板,放置中继器里备用。
4、拖拽个矩形(复制5个),大小跟中继器的格子一样大,然后组合起来(每个格子都起好名字,查找方便)并且隐藏,用于拖拽时候获取列表内容跟随拖动图标移动。

5、如图:


二、教程开始
1、首先双击进入中继器里面,把第一个矩形大小设定好,然后复制出5个,每个矩形起好名字,方便找到,然后中继器属性也都起好名字并且填上内容,设置事件每项加载时获取对应文本。然后给这几个矩形组合起来备用。

注意:id属性要填好,用于更换位置后更新排序。

如图:


2、然后把拖动图标转换为动态面板,剪切到中继器里,放置最后一格中间位置。

如图:


3、我们对拖动图标动态面板进行拖动事件设定,当拖动时,设置动态面板垂直移动。

如图:


4、设置动态面板事件,拖动开始时,设置移动事先准备好的组合到绝对位置,x=中继器的x坐标,y=中继器+item.id*35的坐标(35是中继器里格子的高度,如果你设定的格子是40,那你就item.id*40)

如图:


5、还是拖动开始时,设定外面组合的每个格子对应获取中继器的数据,然后标记全部中继器(用于之后更新行),然后显示组合,然后设置中继器里的这些格子不透明30%(用于拖拽时候能看出效果)

如图:

6、当拖动图标动态面板移动时,设置外面的组合跟随。
如图:


PS:到这里大家可以F5运行拖拽一下,效果是有了,但是越拖越乱,因为拖拽后没有更新行的缘故。所以继续往下来。
7、对面板继续设定事件,当拖动结束时,设置更新中继器id这一行,=(中继器里的组合.y-中继器.y)/行高度。

如图:


8、当拖动结束时,添加排序,给id进行升序。

如图:


9、当拖动结束时,我们设定一个触发单击事件,然后继续添加事件,当鼠标点击时,设置更新id已标记行,=目标id-1。别移动外面的组合到中继器的x坐标,中继器的y+id*35的y坐标。

如图:


10、最后一步,当拖动结束时,等待100毫秒隐藏外面的组合。

如图:


三、到这里教程就全部结束了,大家有更好的实现方式可以留言交流,感谢你们。

axure商城
上传的附件:
快速回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (13)
  • sunpoo 普通用户 24天前
    0 引用 14
    666
  • 溪风丨微雨轻尘 普通用户 24天前
    0 引用 13
    感谢分享
  • 波明 普通用户 6月前
    0 引用 12
    感谢分享
  • luckyphp 普通用户 6月前
    0 引用 11
    感谢分享
  • lxy1120 普通用户 6月前
    0 引用 10
    感谢感谢
  • 飞奔的母猪 普通用户 6月前
    0 引用 9
    感谢分享
  • 123456ZZZ 普通用户 7月前
    0 引用 8
    666
  • βθ 普通用户 7月前
    0 引用 7
    感谢分享
  • 最好 普通用户 8月前
    0 引用 6
    感谢
  • qinggg_1577584265 普通用户 8月前
    0 引用 5
    谢谢分享
  • 宸枫 普通用户 8月前
    0 引用 4
    感谢
  • 2352 普通用户 8月前
    0 引用 3
    稀饭
  • 沈十三 管理员 8月前
    0 引用 2
    感谢分享,已获得10金币奖励!
返回
axure商城