制作原型的時(shí)候，我們也會(huì)經(jīng)常使用拖拽效果，今天我們就來(lái)一起看看OnDrag的事件。
版權(quán)說(shuō)明：以下內(nèi)容，除標(biāo)明引用的部分，均為原創(chuàng)，轉(zhuǎn)發(fā)時(shí)請(qǐng)標(biāo)明出處，不要用于商業(yè)培訓(xùn)等用途哦~，感謝支持。
軟件版本說(shuō)明：以下示例均以Axure RP
9（英文版）為基礎(chǔ)進(jìn)行制作。
意見(jiàn)與建議：歡迎大家留言，一起開(kāi)發(fā)新的討論課題。
????????我們?cè)O(shè)置一個(gè)內(nèi)容頁(yè)面，并在內(nèi)容頁(yè)面中，放置動(dòng)態(tài)面板（命名：Content），并將大小設(shè)置為寬349 高2810，并在面板中添加需要現(xiàn)實(shí)的內(nèi)容。
1）為了方便測(cè)試，我們?cè)趦?nèi)容面板右側(cè)，放置兩個(gè)文本，分別用于顯示面板的top、bottom、left和right。
注：Content請(qǐng)勿勾選縮放以適應(yīng)內(nèi)容
注：請(qǐng)勿勾選fit
關(guān)于其中原因，我們放在文章的末尾進(jìn)行解釋。
2）為Content增加OnDrag事件
????????測(cè)試1）按照以上配置，運(yùn)行；
????????如圖所示，在拖動(dòng)面板時(shí)，四個(gè)參數(shù)隨之改變。
????????測(cè)試2）僅允許隨y方向移動(dòng)，配置如下：
????????運(yùn)行，查看結(jié)果；僅允許隨x方向移動(dòng)的配置，參見(jiàn)上圖；
????????測(cè)試3）在測(cè)試2的基礎(chǔ)上，我們對(duì)移動(dòng)的事件做一些限制：
????????在OnDrag事件中，我們添加boundary如下圖所示：
????????運(yùn)行，查看結(jié)果，我們可以看出，Content頂部無(wú)法移動(dòng)至窗口外，同樣的，可以增加其他的限制條件進(jìn)行測(cè)試，在反復(fù)測(cè)試后，我們不難得出以下結(jié)論：
????????OnDrag的事件中的boundary條件，限制了拖拽事件只能在boundary條件為真時(shí)發(fā)生。
3）接下來(lái)，我們?cè)趦?nèi)容頁(yè)面中，增加一個(gè)模擬的顯示窗口（Box，375*667），如下圖所示：
????????我們現(xiàn)在對(duì)OnDrag事件中的boundary條件進(jìn)行編輯，使得內(nèi)容在上下拖動(dòng)時(shí)Box中不能出現(xiàn)空白區(qū)域
????????條件一：Content的頂部必須小于等于窗口的頂部（即只能在窗口的頂部以上拖動(dòng)）；
????????條件二：Content的底部必須大于等于窗口的底部（即只能在窗口的底部以下拖動(dòng)）；
????????運(yùn)行，查看結(jié)果。如此一來(lái)，我們便成功實(shí)現(xiàn)了窗口內(nèi)拖動(dòng)的功能。
4）在我們使用APP時(shí)，界面下拉后并松開(kāi)，會(huì)觸發(fā)一次界面的刷新。這個(gè)效果又要如何制作呢？
下面是個(gè)簡(jiǎn)單的示例：
????????a）首先，我們將原有的boundary條件中的top限制設(shè)置為100，即內(nèi)容可以下拉至低于窗口頂部100像素的位置；
????????b）同時(shí)，我們?cè)黾覱nDragDrop（拖拽釋放）事件。在本事件中，我們定義Move 事件，將面板移動(dòng)至x，y，其中x設(shè)置為面板的left，y設(shè)置為0，并設(shè)置移動(dòng)的效果為Bounce,500ms。
????????c）此時(shí)，我們?cè)賮?lái)運(yùn)行，查看結(jié)果。
最終，我們使用InlineFrame進(jìn)行頁(yè)面的關(guān)聯(lián)，就實(shí)現(xiàn)了APP中列表顯示的效果。
注的解釋：
動(dòng)態(tài)面板設(shè)置自適應(yīng)時(shí)，在其加載時(shí)，由于內(nèi)容沒(méi)有加載，因此，得到的高度其實(shí)為默認(rèn)高度，與內(nèi)容無(wú)關(guān)。如下圖所示。
此時(shí)，就不能使用bottom來(lái)限制窗口的移動(dòng)了。
小問(wèn)題：
1、如果設(shè)置了適應(yīng)內(nèi)容，我們應(yīng)該如何修改限制條件，來(lái)達(dá)到同樣的效果呢？
2、嘗試使用全局變量，使得InlineFrame窗口的大小發(fā)生變化時(shí)，Content的OnDrag函數(shù)的條件參數(shù)不用修改。
文章中的附件：
百度網(wǎng)盤(pán)下載地址 ?? 密碼：gb6l
