在之前的一篇文章中，我們介紹了如何使用Axure設(shè)計一個拖拽控件上下排序的功能。但是，我們使用了一個臨時解決方案——“絕對數(shù)值”，這種方法雖然可以快速實現(xiàn)，但是在實際應(yīng)用過程中存在通用性不足等問題。因

在之前的一篇文章中，我們介紹了如何使用Axure設(shè)計一個拖拽控件上下排序的功能。但是，我們使用了一個臨時解決方案——“絕對數(shù)值”，這種方法雖然可以快速實現(xiàn)，但是在實際應(yīng)用過程中存在通用性不足等問題。因此，今天我們將為大家介紹一種更加優(yōu)化的代碼編寫方式，使得我們的拖拽控件上下排序功能更加實用。

一、導入上一篇的控件

首先，我們需要導入上一篇文章中設(shè)計好的拖拽控件上下排序的控件，如果您還沒有進行過設(shè)計，請參考以下鏈接：Axure設(shè)計：拖拽控件上下排序。

二、新建矩形并設(shè)置為隱藏

為了避免各控件的全局變量混亂，我們新建了一個名為“Label”的矩形，并將其設(shè)置為隱藏。您也可以設(shè)置一個全局變量，比如：X。習慣新建“文本標簽”或“矩形”替代全局變量，以避免混淆。

三、調(diào)整布局

在此步驟中，我們需要進行以下操作：

- 設(shè)置”矩形：background”的大小為400*360；位置（118,80）。

- 設(shè)置”動態(tài)面板：組件1”的大小為240*80；位置（200,100）。即“矩形：background”的頂部和”動態(tài)面板：組件1”的頂部間隔為20；同理，“矩形：background”的底部和”動態(tài)面板：組件4”的底部間隔也為20。

四、修改“動態(tài)面板：組件1“代碼

注意：其他“組件”的代碼相同，只需要進行復制即可。

五、拖動開始時的Case1用例

在拖動開始時，我們需要完成以下操作：

- 隱藏”動態(tài)面板：組件1“；

- 拉動元件：下方；

- 動畫：線性；

- 時間：100毫秒；

- 顯示”動態(tài)面板：組件1“，并置于頂層；

- 設(shè)置不透明度：80%；

- 設(shè)置“矩形：Label”的值為：[[this.y]]。

隱藏”動態(tài)面板：組件1“時的拉動元件，可以不設(shè)置動畫，設(shè)置動畫及時間是為了有個“移動”的感覺，副作用就是相應(yīng)的操作不能過快。

六、拖動時的Case1用例

在拖動時，我們需要完成以下操作：

- 垂直拖動“動態(tài)面板：組件1“；

- 移動：垂直拖動；

- 設(shè)置界限；

- 其中，設(shè)置“元件：background”為局部變量LVAR1；所以，界限的頂部大于等于[[]]，底部小于[[]]。

七、拖動結(jié)束時的Case1用例

在拖動結(jié)束時，我們需要完成以下操作：

- 設(shè)置不透明度：100%；

- Case2判定條件：“值：[[this.y]]大于[[LVAR1.y 20]]“且”值：[[this.y]]小于等于[[LVAR1.height-20]]“；

- 動作：移動當前元件到達指定（X，Y）；隱藏當前組件；顯示當前組件；推動元件：下方；

- 其中，設(shè)置“元件文字：Label”為局部變量LVAR1；所以，X值為[[this.x]]，Y值為[[Math.ceil(TotalDragY/this.height)*this.height LVAR1]]。

八、Case3和Case4

- Case3判定條件：“值：[[this.y]]小于等于[[LVAR1.y 20]]“；

- 動作：移動當前元件到達指定（X，Y）；隱藏當前組件；顯示當前組件；推動元件：下方；

- 其中，設(shè)置“元件：background”為局部變量LVAR1；所以，X值為[[this.x]]，Y值為[[LVAR1.y 20]]。

- Case4判定條件：“值：[[this.y]]大于[[LVAR1.height-20]]“；

- 動作：移動當前元件到達指定（X，Y）；隱藏當前組件；顯示當前組件；推動元件：下方；

- 其中，設(shè)置“元件：background”為局部變量LVAR1；所以，X值為[[this.x]]，Y值為[[LVAR1.height-20]]。

九、復制代碼

最后，我們只需要復制“動態(tài)面板：組件1“交互代碼給其他“組件”，就能夠?qū)崿F(xiàn)整個拖拽控件上下排序的功能。

總結(jié)

本文為大家介紹了如何優(yōu)化Axure設(shè)計中的拖拽控件上下排序的功能，使其更加實用。通過以上操作，我們可以避免在實際應(yīng)用中出現(xiàn)通用性不足等問題。希望本文對您有所幫助。如果您覺得不錯，也請投個票，點贊支持哦！