位置:首頁(yè) > 軟件操作教程 > UI設(shè)計(jì)軟件 > Adobe Dreamweaver > 問(wèn)題詳情

如何簡(jiǎn)單拖動(dòng)?Dreamweaver CC

提問(wèn)人:劉旭39發(fā)布時(shí)間:2020-11-11

簡(jiǎn)單拖動(dòng)

“拖動(dòng)AP元素”行為就是在頁(yè)面中應(yīng)用拖放技術(shù),該行為允許用戶拖動(dòng)絕對(duì)定位元素。下面通 過(guò)案例介紹“拖動(dòng)AP元素”行為的具體應(yīng)用。在本案例中,將制作一個(gè)簡(jiǎn)單的可拖動(dòng)AP元素,在 這個(gè)區(qū)域中按下鼠標(biāo)左鍵并拖動(dòng)時(shí),該絕對(duì)定位元素將跟隨鼠標(biāo)指針移動(dòng)。

【操作步驟】

第1步,啟動(dòng)Dreamweaver CC,打開本節(jié)orig.htm丨文件,另存為effect.html。

第2步,定義一個(gè)絕對(duì)定位的Div元素。選擇“插入”丨“結(jié)構(gòu)” | Div命令,在頁(yè)面中插入一個(gè) Div元素,新建CSS規(guī)則,定義該元素為絕對(duì)定位顯示。選中該元素,在“屬性”面板的“AP元素 編號(hào)”下拉列表框中設(shè)置該絕對(duì)定位元素的名稱為apDivl,同時(shí)定義元素的寬度和高度,最后在絕 對(duì)定位元素中插入一個(gè)對(duì)話框,如圖所示。

第3步,在編輯窗口空白區(qū)域單擊,不選擇<body>標(biāo)簽,即不選中頁(yè)面內(nèi)任何內(nèi)容打開“行為”

面板,單擊按鈕,從下拉菜單中選擇“拖動(dòng)AP元素”命令,打開“拖動(dòng)AP元素”對(duì)話框,如圖所示。image.png

第4步,在“AP元素”下拉列表框中設(shè)置要拖動(dòng)的絕對(duì)定位元素。在該下拉列表框中選擇咖 “apDivl” 選項(xiàng)。

第5步,在“移動(dòng)”下拉列表框中設(shè)置移動(dòng)E域。從中選擇“不限制”選項(xiàng),允許瀏覽者在網(wǎng)頁(yè)中自由拖動(dòng)絕對(duì)定位元素,其他選項(xiàng)保持默認(rèn)設(shè)置。

第6步,設(shè)置完成后單擊“確定”按鈕。返回“行為”面板,在行為列表中多了 一條行為.在“事 件”下拉列表框中選擇onLoad,動(dòng)作項(xiàng)下保持默認(rèn)值為“拖動(dòng)AP元素”,如圖所示,這就是剛才為絕對(duì)定位元素添加“拖動(dòng)AP元素”行為。

第7步,至此,操作完畢,保存并預(yù)覽網(wǎng)頁(yè),在網(wǎng)頁(yè)中可以任意地拖動(dòng)插入的對(duì)話框,演示效果

繼續(xù)查找其他問(wèn)題的答案?

相關(guān)視頻回答
回復(fù)(0)
返回頂部