08.06 Axure:實現列表上下拖動的方法

如何用Axure實現列表拖動排序?這篇文章《Axure教程:列表拖動排序的實現方式 》 提出用中繼器可以實現,但是明確指出只能向上拖動。本文有個方法,不僅可以向上拖動,還可以向下拖動。

Axure:实现列表上下拖动的方法

手動實現效果如下:

Axure:实现列表上下拖动的方法

步驟如下,大神輕拍。

拖動開始時:

  • 記錄被拖動條目當前的y座標值;
  • 設置文字便於觀察(下同)。

拖動時:

  • 設置拖動邊界;
  • 將當前拖動的條目置於頂層;
  • 記錄拖動時y座標值;
  • 計算拖動距離。
Axure:实现列表上下拖动的方法

拖動結束後:

  • 根據被拖動條目的運動方向以及其他條目與被拖動條目的相對位置進行判斷,確定受影響條目,並計算被影響條目應該移動的距離(相對距離,y軸方向移動距離為一個條目高度)和方向。
  • 修正拖動距離,以條目高度50為例,拖動距離求餘,取50餘數捨去。計算公式:[[dragy_instance-dragy_instance%50]],dragy_instance為實際拖動距離正負值皆可使用此公式計算。
  • 修正拖動後位置,移動距離[[dragy_instance_modify-dragy_instance]]。
Axure:实现列表上下拖动的方法
Axure:实现列表上下拖动的方法Axure:实现列表上下拖动的方法

題圖來自 Unsplash ,基於 CC0 協議


分享到:


相關文章: