Axure設(shè)計網(wǎng)頁圓形的時候，想要實現(xiàn)控件拖拽的上下排序，我們可以通過中繼器實現(xiàn)，局限性在于僅能往上拖拽排序，往下無法排序，下面我們就來看看詳細的教程。

原型設(shè)計工具Axure RP Pro 8.1特別版 中文漢化特別版(附漢化包+注冊碼+安裝教程)

• 類型：輔助設(shè)計
• 大?。?/span>90.5MB
• 語言：簡體中文
• 時間：2018-05-24

查看詳情

看似一個復雜的效果，實現(xiàn)起來發(fā)現(xiàn)也挺簡單的，經(jīng)過測試，發(fā)現(xiàn)只要設(shè)置一個“組件”的交互，其他“組件”的代碼完全相同，哈哈，僅僅只要復制、粘貼即可~

主要的應(yīng)用方式，就是鼠標拖拽”控件“移動（可參考早期鏈接），并判斷”控件“所在位置~

新建一矩形，置于底層，命名為“ background”，尺寸450*450（大小隨意），隱藏，并鎖定位置（105,20）

另新建一矩形，設(shè)置矩形內(nèi)容為“組件1”，填充色#CCCCCC，尺寸大小為240*75；并轉(zhuǎn)為”動態(tài)面板“；此動態(tài)面板，命名為”Module1“，設(shè)置尺寸為240*80；

此動態(tài)面板，命名為”Module1“，設(shè)置尺寸為240*80；

可以另復制3份”動態(tài)面：Module1“，分別命名為”Module2“、”Module3“、”Module4“，并修改其內(nèi)容為“組件2”、“組件3”、“組件4”及填充色；“Module1“、”Module2“、”Module3“、”Module4“，垂直排列，組件上下之間無間隙~（間隙預留在了動態(tài)面板state1中），參考如下：

也可以在設(shè)置好”動態(tài)面：Module1“的交互動作后，再復制，并做想相應(yīng)的修改；”動態(tài)面板：組件“的交互大致相同，所以這里僅作”動態(tài)面板：組件1“的交互說明，其他不再贅述~

”動態(tài)面板：組件1“的”拖動開始時“的Case1用例：

1.隱藏”動態(tài)面板：組件1“；拉動元件：下方；動畫：線性；時間：100毫秒

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

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

”動態(tài)面板：組件1“的”拖動時“的Case1用例：垂直拖動“動態(tài)面板：組件1“；移動：垂直拖動；設(shè)置界限

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

”動態(tài)面板：組件1“的”拖動結(jié)束時“的交互就比較多，主要是判斷“組件”的位置，這里只設(shè)置4個組件的移動，所以有幾個臨界點，分別為（200,140），（200,220），（200,300）；（這里使用了絕對數(shù)值，這不是一個很好的法子，也僅為演示效果及快速實現(xiàn)需要；下一篇優(yōu)化時，轉(zhuǎn)為動態(tài)計算來回避絕對數(shù)值帶來的局限性）

用例：Case1

判定條件：”值：[[This.y+this.height/2]]小于等于140“

動作：

1.移動當前組件到達（200，100）；動畫：無

2.隱藏當前組件

3.顯示當前組件；推動元件：下方

同理，設(shè)置用例Case2，Case3，Case4

用例：Case2

判定條件：

”值：[[This.y+this.height/2]]小于等于220；“

且

”值：[[This.y+this.height/2]]大于140；“

動作：

1.移動當前組件到達（200，180）；動畫：無

2.隱藏當前組件

3.顯示當前組件；推動元件：下方

用例：Case3

判定條件：

”值：[[This.y+this.height/2]]小于等于300；“

且

”值：[[This.y+this.height/2]]大于220；“

動作：

1.移動當前組件到達（200，260）；動畫：無

2.隱藏當前組件

3.顯示當前組件；推動元件：下方

用例：Case4

判定條件：

”值：[[This.y+this.height/2]]大于300；“

動作：

1.移動當前組件到達（200，340）；動畫：無

2.隱藏當前組件

3.顯示當前組件；推動元件：下方

僅僅幾步簡單的設(shè)置，就完成了”動態(tài)面板：組件1“的交互，其他”組件“的代碼直接復制過來即可~

以上就是Axure制作拖拽控件上下排序的教程，希望大家喜歡，請繼續(xù)關(guān)注腳本之家。

相關(guān)推薦：

Axure RP8怎么快速導入圖片?

Axure RP8元件怎么設(shè)置顏色與透明度?

Axure怎么制作圖片局部放大的效果?

最新評論