Axure怎么設(shè)計(jì)網(wǎng)頁(yè)中拖拽控件上下排序的模塊?

百度經(jīng)驗(yàn) 發(fā)布時(shí)間：2019-01-03 16:14:09 作者：goodbyte01

Axure怎么設(shè)計(jì)網(wǎng)頁(yè)中拖拽控件上下排序的模塊？網(wǎng)頁(yè)中我們經(jīng)常能見到通過拖拽控件進(jìn)行上下排版的效果，該怎么制作呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下

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

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

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

查看詳情

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

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

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

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

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

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

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

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

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

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

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

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

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

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