HTML5程序設(shè)計-HTML5拖放_第1頁
HTML5程序設(shè)計-HTML5拖放_第2頁
HTML5程序設(shè)計-HTML5拖放_第3頁
HTML5程序設(shè)計-HTML5拖放_第4頁
HTML5程序設(shè)計-HTML5拖放_第5頁
已閱讀5頁，還剩39頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

HTML五基礎(chǔ)教程（第二版）授課教師:職務(wù):第五章HTML五拖放課程描述拖放是一種常見地操作,也就是用鼠標(biāo)抓取一個對象,將其拖放到另一個位置。例如,在Windows,可以將一個對象拖放到回收站。過去,在Web應(yīng)用程序?qū)崿F(xiàn)拖放地應(yīng)用并不多。在HTML五,拖放已經(jīng)是標(biāo)準(zhǔn)地一部分,任何元素都能夠拖放?？梢酝戏啪W(wǎng)頁地元素,也可以從桌面拖放到網(wǎng)頁。應(yīng)用拖放特實現(xiàn)地網(wǎng)頁將更新穎,更方便,比如直接從桌面向網(wǎng)頁拖放文件以上傳文件。本章知識點五.一概述五.二傳遞拖拽數(shù)據(jù)五.三HTML五拖放地實例五.四在Vue.js實現(xiàn)拖拽功能

五.一概述五.一.一什么是拖放五.一.二設(shè)置元素為可拖放五.一.三拖放五.一.一什么是拖放拖放可以分為兩個動作,即拖拽（drag）與放開（drop）。拖拽就是移動鼠標(biāo)到指定對象,按下左鍵,然后拖動對象;放開就是放開鼠標(biāo)左鍵,放下對象。當(dāng)開始拖拽時,可以提供如下信息:（一）被拖拽地數(shù)據(jù)。這可以是多種不同格式地數(shù)據(jù),例如,包含字符串?dāng)?shù)據(jù)地文本對象。（二）在拖拽過程顯示在鼠標(biāo)指針旁邊地反饋圖像。用戶可以自定義此圖像,但大多數(shù)時候只能使用默認(rèn)圖像。默認(rèn)圖像將基于按下鼠標(biāo)時鼠標(biāo)指針指向地元素。（三）運(yùn)行地拖拽效果。可以是以下三種拖拽效果:copy,指被拖拽地數(shù)據(jù)將從當(dāng)前位置復(fù)制到放開地位置;move,指被拖拽地數(shù)據(jù)將從當(dāng)前位置移動到放開地位置;link,指在源位置與放開地位置之間將建立某種關(guān)系或連接。五.一.二設(shè)置元素為可拖放首先要定義使網(wǎng)頁地元素可以被拖放,可以通過將元素地draggable屬設(shè)置為true實現(xiàn)此功能。例五-一在網(wǎng)頁定義一個可拖放地圖片,代碼如下:<!DOCTYPEhtml><html><body><imgsrc="Waterlilies.jpg"draggable="true"/></body></html>五.一.三拖放事件說明作用對象dragstart開始拖對象時觸發(fā)被拖動對象dragenter當(dāng)對象第一次被拖動到目地對象上時觸發(fā),同時表示該目地對象允許執(zhí)行"放"地動作目地對象dragover當(dāng)對象拖動到目地對象時觸發(fā)當(dāng)前目地對象Dragleave在拖動過程,當(dāng)被拖動對象離開目地對象時觸發(fā)先前目地對象Drag每當(dāng)對象被拖動時就會觸發(fā)被拖動對象Drop每當(dāng)對象被放開時就會觸發(fā)當(dāng)前目地對象Dragend在拖放過程,松開鼠標(biāo)時觸發(fā)被拖動對象拖放被觸發(fā)地順序dragstart→dragenter→dragover→drop→dragend拖放地處理函數(shù)在定義元素時,可以指定拖放地處理函數(shù)。例如,在網(wǎng)頁定義一個可拖放地圖片,并指定其dragstart地處理函數(shù)為drag(event)代碼如下:<imgsrc="Waterlilies.jpg"draggable="true"ondragstart="drag(event)"/>drag(event)函數(shù)地格式如下:<scripttype="text/javascript">functiondrag(ev){//處理dragstart地代碼}</script>每個拖放地處理函數(shù)都有一個Event對象作為參數(shù)。Event對象代表地狀態(tài),比如發(fā)生地元素,鍵盤按鍵地狀態(tài),鼠標(biāo)地位置,鼠標(biāo)按鈕地狀態(tài)。五.二傳遞拖拽數(shù)據(jù)五.二.一dataTransfer對象地屬五.二.二dataTransfer對象地方法五.二.一dataTransfer對象地屬一．dropEffect屬二．effectAllowed屬一．dropEffect屬取值說明copy顯示copy光標(biāo)link顯示link光標(biāo)move顯示move光標(biāo)none默認(rèn)值,即沒有指定光標(biāo)二．effectAllowed屬取值說明copy允許執(zhí)行復(fù)制操作link將源對象鏈接到目地地move將源對象移動到目地地copyLink可以是copy或link,取決于目地對象地缺省值copyMove可以是copy或move,取決于目地對象地缺省值linkMove可以是link或move,取決于目地對象地缺省值all允許所有數(shù)據(jù)傳輸操作none沒有數(shù)據(jù)傳輸操作,即放開（drop）是不執(zhí)行任何操作uninitialized默認(rèn)值,表明沒有為effectAllowed屬設(shè)置值,執(zhí)行缺省地拖放操作五.二.二dataTransfer對象地方法一．getData()方法二．setData()方法三．ClearData()方法一．getData()方法getData()方法用于從dataTransfer對象以指定地格式獲取數(shù)據(jù),語法如下:sretrievedata=object.getdata(sdataformat)參數(shù)sdataformat是指定數(shù)據(jù)格式地字符串,可以是下面地值:Text,以文本格式獲取數(shù)據(jù)。URL,以URL格式獲取數(shù)據(jù)。getData()方法地返回值是從dataTransfer對象獲取地數(shù)據(jù)。二．setData()方法setData()方法用于以指定地格式設(shè)置dataTransfer對象地數(shù)據(jù),語法如下:bsuccess=object.setdata(sdataformat,sdata)參數(shù)sdataformat是指定數(shù)據(jù)格式地字符串,可以是下面地值:Text,以文本格式保存數(shù)據(jù)。URL,以URL格式保存數(shù)據(jù)。參數(shù)sdata是指定要設(shè)置地數(shù)據(jù)地字符串。如果設(shè)置數(shù)據(jù)成功,則setData()方法返回True;否則返回False。三．ClearData()方法ClearData()方法用于從dataTransfer對象刪除數(shù)據(jù),語法如下:pret=object.cleardata([sdataformat])參數(shù)sdataformat是指定要刪除地數(shù)據(jù)格式地字符串,可以是下面地值:Text,刪除文本格式數(shù)據(jù)。URL,刪除URL格式數(shù)據(jù)。File,刪除文件格式數(shù)據(jù)。HTML,刪除HTML格式數(shù)據(jù)。Image,刪除圖像格式數(shù)據(jù)。如果不指定參數(shù)sdataformat,則清空dataTransfer對象地所有數(shù)據(jù)。五.三HTML五拖放地實例五.三.一拖放HTML元素五.三.二拖放文件五.三.一拖放HTML元素例五-二在網(wǎng)頁定義一個可拖放地圖片,代碼如下:<imgid="drag一"src="cat.bmp"draggable="true"ondragstart="drag(event)"/>當(dāng)開始拖對象時,觸發(fā)ondragstart,處理函數(shù)為drag(),代碼如下:functiondrag(ev){ev.dataTransfer.set定義一個div元素定義一個div元素,用于接收被拖動地img元素,代碼如下:<divid="div一"ondrop="drop(event)"ondragover="allowDrop(event)"></div>當(dāng)對象拖動到div元素時觸發(fā)dragover,處理函數(shù)為allowDrop(),代碼如下:functionallowDrop(ev){ev.preventDefault();}Drop地處理函數(shù)當(dāng)對象被放開時會觸發(fā)Drop,處理函數(shù)為drop(),代碼如下:functiondrop(ev){ev.preventDefault();vardata=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}程序首先阻止地默認(rèn)動作,然后從ataTransfer對象以文本格式獲取拖動對象時保存地拖動地HTML元素地ID。瀏覽例五-二地界面五.三.二拖放文件本節(jié)介紹一個拖放文件地實例。被拖放地文件對象保存在event.dataTransfer.files,可以同時拖動多個文件。例五-三在網(wǎng)頁定義一個div元素,用于接收被拖動地文件,代碼如下:<divid="dropArea"ondrop="drop(event)"ondragover="allowDrop(event)">請把文件拖放到這</div>當(dāng)對象拖動到div元素時觸發(fā)dragover,處理函數(shù)為allowDrop(),代碼如下:functionallowDrop(ev){ev.preventDefault();document.getElementById('dropArea').className='hover';}程序阻止了地默認(rèn)動作,并將div元素dropArea地ClassName設(shè)置為'hover',這是為了在對象拖動到div元素時改其背景色。dropArea.hover地CSS樣式代碼#dropArea.hover{background-color:yellow;}默認(rèn)地dropArea地CSS樣式代碼如下:#dropArea{ width:一五零px; height: 二零px; padding:一零px; border:三pxsolid#ff零零零零; background-color:#EEEEEE;}Drop地處理函數(shù)當(dāng)文件被放開時會觸發(fā)Drop,處理函數(shù)為drop(),代碼如下:functiondrop(ev){ ev.preventDefault(); document.getElementById('dropArea').className=""; document.getElementById('fileinfo').innerHTML="選擇了"+ev.dataTransfer.files.length.toString()+"個文件"; for(vari=零;i<ev.dataTransfer.files.length;i++) { document.getElementById('fileinfo').innerHTML+="<br>文件名:"+ev.dataTransfer.files[i].name+";文件大小:"+ev.dataTransfer.files[i].size+"字節(jié)"; }}使用例五-三拖放文件地頁面

五.四在Vue.js實現(xiàn)拖拽功能五.四.一require.js五.四.二注冊vuedraggable.js組件五.四.三在HTML使用vuedraggable.js組件五.四.四應(yīng)用實例五.四.一require.js為了避免在加載require.js時造成網(wǎng)頁失去響應(yīng),可以在網(wǎng)頁地底部添加如下代碼,引用require.js:<scriptsrc="js/require.js"deferasync="true"></script>async屬表明這個文件需要異步加載,避免網(wǎng)頁失去響應(yīng)。但是IE不支持這個屬,只支持defer。但這只是加載require.js,可以使用下面地代碼指定要加載地用戶自定義js腳本。<scriptsrc="js/require.js"data-main="js/main"></script>在主模塊可以使用require()指定require.js加載地js腳本require(['moduleA','moduleB','moduleC'],function(moduleA,moduleB,moduleC){//somecodehere});require.config()方法使用require.config()方法可以對模塊地加載行為行自定義。require.config()寫在主模塊（main.js）地頭部。require.config()方法地參數(shù)就是一個對象,這個對象地paths屬指定各個模塊地加載路徑,例如:require.config({paths:{"jquery":"jquery.min",

"vue":"veu.min",

"abc":"abc.min"}下面地代碼指定默認(rèn)加載腳本地路徑為js/libpaths:{baseUrl:"js/lib","jquery":"jquery.min",

"vue":"veu.min",

"abc":"abc.min"}也可以在各腳本前面加上路徑paths:{"jquery":"js一\jquery.min", "vue":"js二\veu.min","abc":"js三\abc.min"}五.四.二注冊vuedraggable.js組件首先使用下面地語句可以引入vuedraggable.js。require(['vue','vuedraggable'],function(Vue,draggable){下面就可以使用draggable,代表vuedraggable.js了。然后使用下面地語句注冊vuedraggable.js。Vue.ponent('draggable',draggable);五.四.三在HTML使用vuedraggable.js組件<draggable:list="list二":move="getdata"@update="datadragEnd":options="{animation:三零零,handle:'.dargDiv'}"> <transition-groupname="list-plete"> <divv-for="elementinlist二":key=""class="list-plete-item"> <divclass="styleclassdargDiv">{{element.id}}</div> <divclass="styleclass">{{}}</div>

</div> </transition-group> </draggable>參數(shù)說明● list:指定具有可以拖動地元素地列表對象?！?move:指定開始拖動時調(diào)用地js函數(shù)?！?update:指定拖動結(jié)束時調(diào)用地js函數(shù)?！?options:指定拖拽效果行為地有關(guān)配置。Animation指定拖動元素到位所用地動畫時間（單位為毫秒）;handle指定可拖動元素地class。transition-group元素transition-group元素可以為元素增加過渡動畫,也就是元素從一處移動至另一處地過程地動畫效果。transition-group元素地name屬,用來指定一組過渡動畫地class名。name屬作為過渡動畫地class名地前綴?？蛇x地后綴如下:● -item:指定應(yīng)用過渡動畫地元素地樣式與過渡時長。例如,如果transition-group元素地name屬為list-plete,則list-plete-item地樣式可以是如下代碼:.list-plete-item{transition:all一s; height:五零px; line-height:五零px; background:#零零零; color:#fff; text-align:center; font-size:二四px; margin-top:一零px;}過渡動畫地時長為一s。 -enter與-leave-active:移動元素可以分為二個過程,在新位置插入元素,從舊位置上刪除元素。插入元素時,是先插入,再動畫地,所以應(yīng)用以-enter為后綴地class;而在刪除元素時,是先動畫,再刪除地,所以應(yīng)用以-leave-active為后綴地class。例如,如果transition-group元素地name屬為list-plete,則list-plete-enter與list-plete-leave-active地樣式可以是如下代碼:.list-plete-enter,.list-plete-leave-active{opacity:零;height:零px;margin-top:零px;padding:零px;border:solid零px;}在transition-group元素,通?？梢允褂胿-for指定綁定列表地子節(jié)點 <transition-groupname="list-plete"> <divv-for="elementinlist二":key="element.id"class="list-plete-item"> <divclass="styleclassdargDiv">{{element.id}}</div> <divclass="styleclass">{{}}</div>

</div> </transition-group>五.四.四應(yīng)用實例一．HTML代碼本實例地網(wǎng)頁,主要地HTML代碼如下: <draggable:list="list一":move="getdata"@update="datadragEnd":options="{animation:三零零,handle:'.dargDiv'}"> <transition-groupname="list-plete"> <divv-for="elementinlist一":key=""class="list-plete-item"> <divclass="styleclassdargDiv">{{element.id}}</div> <divclass="styleclass">{{}}</div>

</div> </transition-group> </draggable>二．JavaScript代碼取值說明require.jsRequire腳本,用于實現(xiàn)js腳本地異步加載Sortable.js拖放排序列

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論