欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Axure怎么設計網頁中拖拽控件上下排序的模塊?

百度經驗   發(fā)布時間:2019-01-03 16:14:09   作者:goodbyte01   我要評論
Axure怎么設計網頁中拖拽控件上下排序的模塊?網頁中我們經常能見到通過拖拽控件進行上下排版的效果,該怎么制作呢?下面我們就來看看詳細的教程,需要的朋友可以參考下

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

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

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

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

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

此動態(tài)面板,命名為”Module1“,設置尺寸為240*80;

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

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

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

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

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

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

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

設置“元件:background”為局部變量LVAR1;所以,界限的頂部大于等于[[LVAR1.top]],底部小于[[LVAR1.bottom]];

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

用例:Case1

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

動作:

1.移動當前組件到達(200,100);動畫:無

2.隱藏當前組件

3.顯示當前組件;推動元件:下方

同理,設置用例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.顯示當前組件;推動元件:下方

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

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

相關推薦:

Axure RP8怎么快速導入圖片?

Axure RP8元件怎么設置顏色與透明度?

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

相關文章

  • Axure怎么查看頁面的代碼? Axure查看頁面源代碼的兩種方法

    Axure怎么查看頁面的代碼?Axure中制作的網頁原型想要看看代碼,該怎么查看代碼呢?下面我們就來看看Axure查看頁面源代碼的兩種方法,需要的朋友可以參考下
    2018-04-11
  • Axure全局輔助線和頁面輔助線有什么區(qū)別?

    Axure全局輔助線和頁面輔助線有什么區(qū)別?Axure中的輔助線有全局輔助線、頁面輔助線、對齊輔助線、顯示自適應視圖輔助線,那么全局輔助線和頁面輔助線有什么區(qū)別呢?下面我
    2018-04-09
  • Axure動態(tài)面板兩種創(chuàng)建方法有什么區(qū)別?

    Axure動態(tài)面板兩種創(chuàng)建方法有什么區(qū)別?Axure中經常使用東臺面板,動態(tài)面板有兩種創(chuàng)建方法,這兩種創(chuàng)建方法有什么區(qū)別呢?下面我們就來看看詳細的教程
    2018-04-08
  • axure怎么設計密碼輸入框的原型?

    axure怎么設計密碼輸入框的原型?axure中想要制作一個可以輸入密碼的輸入框效果,該怎么制作呢?下面我們就來看看詳細的教程,需要的朋友可以參考下
    2018-04-07
  • Axure有怎么使用格式刷? Axure格式刷的使用方法

    Axure有怎么使用格式刷?Axure中使用格式刷可以更快捷的實現(xiàn)一些功能,省去了做重復工作的機會,今天我們就來看看Axure格式刷的使用方法,需要的朋友可以參考下
    2018-04-03
  • Axure怎么使用熱區(qū)? axure熱區(qū)的使用方法

    Axure怎么使用熱區(qū)?Axure設計原型的時候,熱區(qū)不是很常用,但是我們也需要了解一下,下面我們就來看看axure熱區(qū)的使用方法,需要的朋友可以參考下
    2018-04-02
  • Axure8.0母版怎么應用在頁面上? Axure母版的使用方法

    Axure8.0母版怎么應用在頁面上?Axure中設計頁面的時候,想要直接手要你管母版,該怎么使用呢?下面我們就來看看Axure母版的使用方法,需要的朋友可以參考下
    2018-03-29
  • axure怎么使用Icons圖標組件設計UI?

    axure怎么使用Icons圖標組件設計UI?axure中自帶了很多圖標組件,該怎么直接調用這些組件圖標設計ui呢?下面我們就來看看詳細的教程,需要的朋友可以參考下
    2018-03-27
  • axure怎么設計手機屏幕的滾動條原型?

    axure怎么設計手機屏幕的滾動條原型?手機中經常能見到滾動條,該怎么制作滾動條效果呢?下面我們就來看看axure滾動條的制作方法,需要的朋友可以參考下
    2018-03-27
  • axure怎么設計手機app的側邊欄原型?

    axure怎么設計手機app的側邊欄原型?axure中想要設計原型很簡單,手機app的側邊欄我們經常見,想要設計這個原型,該怎么設計呢?下面我們就來看看詳細的教程,需要的朋友可
    2018-03-27

最新評論