位置：首頁(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ù)，該行為允許用戶(hù)拖動(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，打開(kāi)本節(jié)orig.htm丨文件，另存為effect.html。

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

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

面板，單擊按鈕，從下拉菜單中選擇“拖動(dòng)AP元素”命令，打開(kāi)“拖動(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)
返回頂部