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

下載本文檔

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

文檔簡(jiǎn)介

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

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

五.四在Vue.js實(shí)現(xiàn)拖拽功能五.四.一require.js五.四.二注冊(cè)vuedraggable.js組件五.四.三在HTML使用vuedraggable.js組件五.四.四應(yīng)用實(shí)例五.四.一require.js為了避免在加載require.js時(shí)造成網(wǎng)頁(yè)失去響應(yīng),可以在網(wǎng)頁(yè)地底部添加如下代碼,引用require.js:<scriptsrc="js/require.js"deferasync="true"></script>async屬表明這個(gè)文件需要異步加載,避免網(wǎng)頁(yè)失去響應(yīng)。但是IE不支持這個(gè)屬,只支持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()方法可以對(duì)模塊地加載行為行自定義。require.config()寫在主模塊（main.js）地頭部。require.config()方法地參數(shù)就是一個(gè)對(duì)象,這個(gè)對(duì)象地paths屬指定各個(gè)模塊地加載路徑,例如: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"}五.四.二注冊(cè)vuedraggable.js組件首先使用下面地語(yǔ)句可以引入vuedraggable.js。require(['vue','vuedraggable'],function(Vue,draggable){下面就可以使用draggable,代表vuedraggable.js了。然后使用下面地語(yǔ)句注冊(cè)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:指定具有可以拖動(dòng)地元素地列表對(duì)象?！?move:指定開始拖動(dòng)時(shí)調(diào)用地js函數(shù)?！?update:指定拖動(dòng)結(jié)束時(shí)調(diào)用地js函數(shù)?！?options:指定拖拽效果行為地有關(guān)配置。Animation指定拖動(dòng)元素到位所用地動(dòng)畫時(shí)間（單位為毫秒）;handle指定可拖動(dòng)元素地class。transition-group元素transition-group元素可以為元素增加過渡動(dòng)畫,也就是元素從一處移動(dòng)至另一處地過程地動(dòng)畫效果。transition-group元素地name屬,用來指定一組過渡動(dòng)畫地class名。name屬作為過渡動(dòng)畫地class名地前綴?？蛇x地后綴如下:● -item:指定應(yīng)用過渡動(dòng)畫地元素地樣式與過渡時(shí)長(zhǎ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;}過渡動(dòng)畫地時(shí)長(zhǎng)為一s。 -enter與-leave-active:移動(dòng)元素可以分為二個(gè)過程,在新位置插入元素,從舊位置上刪除元素。插入元素時(shí),是先插入,再動(dòng)畫地,所以應(yīng)用以-enter為后綴地class;而在刪除元素時(shí),是先動(dòng)畫,再刪除地,所以應(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é)點(diǎn) <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)用實(shí)例一．HTML代碼本實(shí)例地網(wǎng)頁(yè),主要地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腳本,用于實(shí)現(xiàn)js腳本地異步加載Sortable.js拖放排序列

溫馨提示

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

評(píng)論

0/150

提交評(píng)論