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

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

原型設(shè)計(jì)工具Axure RP Pro 8.1特別版 中文漢化特別版(附漢化包+注冊(cè)碼+安裝教程)
- 類型:輔助設(shè)計(jì)
- 大?。?/span>90.5MB
- 語言:簡體中文
- 時(shí)間:2018-05-24
看似一個(gè)復(fù)雜的效果,實(shí)現(xiàn)起來發(fā)現(xiàn)也挺簡單的,經(jīng)過測試,發(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)作后,再復(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ù)值帶來的局限性)
用例:Case1
判定條件:”值:[[This.y+this.height/2]]小于等于140“
動(dòng)作:
1.移動(dòng)當(dāng)前組件到達(dá)(200,100);動(dòng)畫:無
2.隱藏當(dāng)前組件
3.顯示當(dāng)前組件;推動(dòng)元件:下方
同理,設(shè)置用例Case2,Case3,Case4
用例:Case2
判定條件:
”值:[[This.y+this.height/2]]小于等于220;“
且
”值:[[This.y+this.height/2]]大于140;“
動(dòng)作:
1.移動(dòng)當(dāng)前組件到達(dá)(200,180);動(dòng)畫:無
2.隱藏當(dāng)前組件
3.顯示當(dāng)前組件;推動(dòng)元件:下方
用例:Case3
判定條件:
”值:[[This.y+this.height/2]]小于等于300;“
且
”值:[[This.y+this.height/2]]大于220;“
動(dòng)作:
1.移動(dòng)當(dāng)前組件到達(dá)(200,260);動(dòng)畫:無
2.隱藏當(dāng)前組件
3.顯示當(dāng)前組件;推動(dòng)元件:下方
用例:Case4
判定條件:
”值:[[This.y+this.height/2]]大于300;“
動(dòng)作:
1.移動(dòng)當(dāng)前組件到達(dá)(200,340);動(dòng)畫:無
2.隱藏當(dāng)前組件
3.顯示當(dāng)前組件;推動(dòng)元件:下方
僅僅幾步簡單的設(shè)置,就完成了”動(dòng)態(tài)面板:組件1“的交互,其他”組件“的代碼直接復(fù)制過來即可~
以上就是Axure制作拖拽控件上下排序的教程,希望大家喜歡,請(qǐng)繼續(xù)關(guān)注腳本之家。
相關(guān)推薦:
相關(guān)文章
Axure怎么查看頁面的代碼? Axure查看頁面源代碼的兩種方法
Axure怎么查看頁面的代碼?Axure中制作的網(wǎng)頁原型想要看看代碼,該怎么查看代碼呢?下面我們就來看看Axure查看頁面源代碼的兩種方法,需要的朋友可以參考下2018-04-11- Axure全局輔助線和頁面輔助線有什么區(qū)別?Axure中的輔助線有全局輔助線、頁面輔助線、對(duì)齊輔助線、顯示自適應(yīng)視圖輔助線,那么全局輔助線和頁面輔助線有什么區(qū)別呢?下面我2018-04-09
Axure動(dòng)態(tài)面板兩種創(chuàng)建方法有什么區(qū)別?
Axure動(dòng)態(tài)面板兩種創(chuàng)建方法有什么區(qū)別?Axure中經(jīng)常使用東臺(tái)面板,動(dòng)態(tài)面板有兩種創(chuàng)建方法,這兩種創(chuàng)建方法有什么區(qū)別呢?下面我們就來看看詳細(xì)的教程2018-04-08- axure怎么設(shè)計(jì)密碼輸入框的原型?axure中想要制作一個(gè)可以輸入密碼的輸入框效果,該怎么制作呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下2018-04-07
- Axure有怎么使用格式刷?Axure中使用格式刷可以更快捷的實(shí)現(xiàn)一些功能,省去了做重復(fù)工作的機(jī)會(huì),今天我們就來看看Axure格式刷的使用方法,需要的朋友可以參考下2018-04-03
Axure怎么使用熱區(qū)? axure熱區(qū)的使用方法
Axure怎么使用熱區(qū)?Axure設(shè)計(jì)原型的時(shí)候,熱區(qū)不是很常用,但是我們也需要了解一下,下面我們就來看看axure熱區(qū)的使用方法,需要的朋友可以參考下2018-04-02Axure8.0母版怎么應(yīng)用在頁面上? Axure母版的使用方法
Axure8.0母版怎么應(yīng)用在頁面上?Axure中設(shè)計(jì)頁面的時(shí)候,想要直接手要你管母版,該怎么使用呢?下面我們就來看看Axure母版的使用方法,需要的朋友可以參考下2018-03-29axure怎么使用Icons圖標(biāo)組件設(shè)計(jì)UI?
axure怎么使用Icons圖標(biāo)組件設(shè)計(jì)UI?axure中自帶了很多圖標(biāo)組件,該怎么直接調(diào)用這些組件圖標(biāo)設(shè)計(jì)ui呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下2018-03-27axure怎么設(shè)計(jì)手機(jī)屏幕的滾動(dòng)條原型?
axure怎么設(shè)計(jì)手機(jī)屏幕的滾動(dòng)條原型?手機(jī)中經(jīng)常能見到滾動(dòng)條,該怎么制作滾動(dòng)條效果呢?下面我們就來看看axure滾動(dòng)條的制作方法,需要的朋友可以參考下2018-03-27axure怎么設(shè)計(jì)手機(jī)app的側(cè)邊欄原型?
axure怎么設(shè)計(jì)手機(jī)app的側(cè)邊欄原型?axure中想要設(shè)計(jì)原型很簡單,手機(jī)app的側(cè)邊欄我們經(jīng)常見,想要設(shè)計(jì)這個(gè)原型,該怎么設(shè)計(jì)呢?下面我們就來看看詳細(xì)的教程,需要的朋友可2018-03-27