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

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

一、導(dǎo)入上一篇的控件

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

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

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

三、調(diào)整布局

在此步驟中，我們需要進(jìn)行以下操作：

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

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

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

注意：其他“組件”的代碼相同，只需要進(jìn)行復(fù)制即可。

五、拖動(dòng)開始時(shí)的Case1用例

在拖動(dòng)開始時(shí)，我們需要完成以下操作：

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

- 拉動(dòng)元件：下方；

- 動(dòng)畫：線性；

- 時(shí)間：100毫秒；

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

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

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

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

六、拖動(dòng)時(shí)的Case1用例

在拖動(dòng)時(shí)，我們需要完成以下操作：

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

- 移動(dòng)：垂直拖動(dòng)；

- 設(shè)置界限；

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

七、拖動(dòng)結(jié)束時(shí)的Case1用例

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

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

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

- 動(dòng)作：移動(dòng)當(dāng)前元件到達(dá)指定（X，Y）；隱藏當(dāng)前組件；顯示當(dāng)前組件；推動(dòng)元件：下方；

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

八、Case3和Case4

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

- 動(dòng)作：移動(dòng)當(dāng)前元件到達(dá)指定（X，Y）；隱藏當(dāng)前組件；顯示當(dāng)前組件；推動(dòng)元件：下方；

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

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

- 動(dòng)作：移動(dòng)當(dāng)前元件到達(dá)指定（X，Y）；隱藏當(dāng)前組件；顯示當(dāng)前組件；推動(dòng)元件：下方；

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

九、復(fù)制代碼

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

總結(jié)

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