前端工程師設(shè)計(jì)開(kāi)發(fā)拖拽從D到HTML教學(xué)

1、拖拽是 web 2.0 應(yīng)用中最流行的技術(shù)之一。本文將介紹如何在網(wǎng)絡(luò)應(yīng)用程序中使用 dojo 和 html5 這兩種技術(shù)的拖拽功能。并將通過(guò)示例詳細(xì)介紹 html5 的拖拽功能。ad：dojo 及 html 5 簡(jiǎn)介dojo 是目前最流行的開(kāi)源 javascript 工具庫(kù)之一，很多開(kāi)發(fā)者以及企業(yè)用戶都把dojo 作為首選的javascript 工具。 dojo為web應(yīng)用的開(kāi)發(fā)提供了大量的客戶端組件，能夠讓你可以方便的進(jìn)行html dom操作、拖拽、ajax調(diào)用、定制可視化控件等來(lái)使得你的web 應(yīng)用變成富網(wǎng)絡(luò)應(yīng)用( ria) 。而且 dojo 在性能、可訪問(wèn)性、多語(yǔ)言支持以及文檔方面都做的

2、非常出色，這也是企業(yè)選擇dojo 的原因之一。51cto!薦專(zhuān)題：html 5下一代 webff發(fā)標(biāo)準(zhǔn)詳解html 5是最新一代的 html.,它將成為 html xhtml以及html dom的新標(biāo)準(zhǔn)，html 5是 w3c與 whatw(合作的結(jié)果，目前仍外于開(kāi)發(fā)中；自從上一代html4, web世界已經(jīng)發(fā)生了巨大的變化，html5的到來(lái)將更大的促進(jìn) web的發(fā)展，htm15提供了很多新的功能，主要有：新的 html 元素，例如 section, nav, header, footer, article等用于繪畫(huà)的canvas元素用于多媒體播放的video和audio元素用于定位的geol

3、ocation api本地存儲(chǔ)以及離線應(yīng)用 web workers拖拽api文件api我們主要對(duì) html 5 的拖拽功能進(jìn)行講解，并結(jié)合文件api 與桌面進(jìn)行交互。來(lái)與dojo 的 dnd 拖拽組件進(jìn)行比較。使用 dojo 創(chuàng)建及定制拖拽應(yīng)用類(lèi)似 dojo 其他組件，拖拽的實(shí)現(xiàn)有兩種方式：聲明式和編程式。在這里我們使用聲明式的方式做簡(jiǎn)要的介紹。在 dojo 拖拽實(shí)現(xiàn)中，有兩個(gè)重要的元素dojo.dnd.source 和 dojo.dnd.target 。這兩個(gè)元素分別標(biāo)示了拖拽中的源容器source 和目標(biāo)容器 target 。值得注意的是源容器 source 默認(rèn)也是目標(biāo)容器target

4、，而不需要作目標(biāo)容器 target 的聲明。我們?cè)谠慈萜?source 中創(chuàng)建一些可以拖動(dòng)的元素， 要讓這些元素可拖動(dòng)， 我們要為這些元素添加class 屬性值 dojodnditem 。 下面的示例代碼定義了一個(gè)源容器 source 以及一些可以拖動(dòng)的元素。在這些可以拖動(dòng)的元素中我們可以定義它們的拖拽類(lèi)型dndtype。 dndtype 的值開(kāi)發(fā)者可以自己定義，而目標(biāo)容器 target 元素的 accept 屬性定義了該目標(biāo)容器接受的拖拽類(lèi)型。清單 1. 創(chuàng)建拖拽的源容器和可拖拽的元素1. <div id ="source" style = "height

5、:400px;" dojotype = "dojo.dnd.source" >2. <div id ="item1" class ="dojodnditem item" dndtype ="divitem" >item1 </div>3. <img src = "w3c.jpg" class = "dojodnditem item" dndtype ="imageitem" ></img>4.

6、 <a href ="/tr/html5/"class ="dojodnditem item" dndtype ="linkitem" >5. html5 specification</a>6. </div>對(duì)于 target 我們可以創(chuàng)建一個(gè)div ，然后加上屬性dojotype= ” dojo.dnd.target ”和屬性 accept 。不在 accept 中的類(lèi)型的 dojodnditem 元素將不被這個(gè)容器接受。 例如清單2 中的目標(biāo)容器只接受divite

7、m 和 imageitem 這兩種類(lèi)型， 那么清單 1中的 linkitem 將不能被拖到這個(gè)目標(biāo)容器中。清單 2. 創(chuàng)建拖拽的目標(biāo)容器和可接受的類(lèi)型1. <div id ="target" style = "height:400px;" dojotype = "dojo.dnd.target"2. accept = "divitem, imageitem" >真正 web 應(yīng)用的拖拽沒(méi)有這么簡(jiǎn)單，開(kāi)發(fā)者往往需要在拖拽的過(guò)程中更多的介入。這時(shí)候可以通過(guò)對(duì) dojo 提供的 dojo.dnd.source

8、 和 dojo.dnd.target 進(jìn)行繼承擴(kuò)展，開(kāi)發(fā)滿足業(yè)務(wù)需要的功能和特性。這里將不贅述。使用 html 5 創(chuàng)建拖拽應(yīng)用在這一章中，我們將要使用 html 5 創(chuàng)建一個(gè)簡(jiǎn)單的拖拽應(yīng)用，如圖 1 所示，用戶可以把網(wǎng)頁(yè)上內(nèi)容從左邊的區(qū)域拖放到右邊的區(qū)域。這個(gè)應(yīng)用程序的代碼可到附件中可以下載。圖 1. html 5 拖拽應(yīng)用效果圖tnrset創(chuàng)建可以拖動(dòng)的節(jié)點(diǎn)使用html 5創(chuàng)建拖拽只需要對(duì)可拖拽的節(jié)點(diǎn)進(jìn)行聲明一一給可以拖拽的節(jié)點(diǎn)添加draggable 屬性并設(shè)值為true。如清單3中的div 節(jié)點(diǎn)，通過(guò)添加draggable 屬性就可以拖拽了。在 html 5中img和a默認(rèn)情況下是可以拖

9、拽的，所以不需要設(shè) 置 draggable 屬性。清單3.通過(guò)添加draggable屬性來(lái)創(chuàng)建源容器中可以拖動(dòng)的節(jié)點(diǎn)1. <div id ="source" style ="height:300px;" >2. <div id ="item1" class ="item" draggable ="true" >item1 </div>3. <img id ="item2" src ="w3c.jpg" class

10、="item" ></img>4. <a id ="item3" href ="/tr/html5/"class ="item" > html5 specification </a>5. </div>創(chuàng)建html 5拖拽的源容器和目標(biāo)容器在html 5中，我們需要給指定的節(jié)點(diǎn)來(lái)綁定一些事件來(lái)使之成為具有源容器或目標(biāo)容器的功能。在 html 5的拖拽過(guò)程中的事件有7個(gè)，分別是應(yīng)用在目標(biāo)容器或拖動(dòng)節(jié)點(diǎn)上的dragstart, drag

11、, dragend 等3個(gè)事件，以及應(yīng)用在目標(biāo)容器節(jié)點(diǎn)上的dragenter, dragover, dragleave 和drop等4個(gè)事件。表1中對(duì)這些事件的觸發(fā)機(jī)制和常見(jiàn)的操作進(jìn)行了描述。表1. html 5拖拽過(guò)程中可以綁定的事件聿件名薪發(fā)機(jī)制辨定節(jié)點(diǎn)對(duì)鹿的dojo事件方法常見(jiàn)舞作drag start當(dāng)鼠標(biāo)左鍵點(diǎn)擊某個(gè)可施助節(jié)點(diǎn)開(kāi)始施投 的,拖動(dòng)的節(jié)點(diǎn)或凝容嘉上ondndstart*對(duì)d白七tran書(shū)fer的數(shù)據(jù)迸行初始1 初始化一些資源.drag當(dāng)拖拽進(jìn)行時(shí)在施找結(jié)更之前，在 5日g start之后b施動(dòng)的節(jié)點(diǎn)或源 容器上.onmousamovs對(duì)拖動(dòng)節(jié)點(diǎn)的位置信息進(jìn)行處理.drag

12、enter拖動(dòng)節(jié)點(diǎn)進(jìn)入目標(biāo)客累時(shí).目標(biāo)容器上.onouereyent對(duì)目標(biāo)容器的樣式迸行修改.dragover拖動(dòng)節(jié)點(diǎn)在目標(biāo)容疆上方時(shí).目標(biāo)容器上.ondraggingover判斷拖動(dòng)的節(jié)點(diǎn)是否裱目標(biāo)節(jié)點(diǎn)菖draglaave拖劭節(jié)點(diǎn)離井目標(biāo)客撰上方時(shí).目赧客器上.cndragglngout對(duì)目標(biāo)容器的樣式送行修改.drop拖勃節(jié)點(diǎn)在目標(biāo)容器上方杪開(kāi)鼠標(biāo)左建 時(shí),目標(biāo)容器上ondrop對(duì)口3丁3恬佗的數(shù)據(jù)進(jìn)行處理工 口。m節(jié)點(diǎn)進(jìn)行操作.drafletid卷開(kāi)鼠標(biāo)左建時(shí)，如drop事件觸發(fā).則 拖動(dòng)的咕爸或麒 ondridcancel 釋放在dragstart中創(chuàng)建的賀?？谠赿rop事件之后口容器

13、上。備注：在dojo中所有dnd源容器或目標(biāo)容器在拖拽開(kāi)始時(shí)都會(huì)調(diào)用ondndstart事件方法，而在html 5中只有拖動(dòng)的節(jié)點(diǎn)及源容器可以觸發(fā)dragstart 事件，其他容器包括目標(biāo)容器在拖動(dòng)開(kāi)始時(shí)不會(huì)感知源容器及拖動(dòng)節(jié)點(diǎn)的 dragstart 事件。清單4 展示給目標(biāo)容器綁定 dragenter, dragover, dragleave, drop 事件的示例代碼。在dragenter 和dragleave 事件中， 我們對(duì)目標(biāo)容器的背景樣式進(jìn)行修改使得用戶感知目標(biāo)容器的狀態(tài)(如圖2所示)。在dragover事件中我們對(duì)清單3中的鏈接元素(id屬性值為item3)的節(jié)點(diǎn)進(jìn)行了限制。dr

14、op事件中我們要把拖動(dòng)的節(jié)點(diǎn)插入到目標(biāo)節(jié)點(diǎn)的dom結(jié)構(gòu)中。清單4.創(chuàng)建目標(biāo)容器的事件1. var target = dojo .byid('target');2. dojo.connect(target, 'dragover', function(e)3. / doesn't allows link item (id ="item3” )to drop4. if (e.datatransfer.getdata('id')!="item3")5. e.preventdefault();6. 7. )；8.9.

15、dojo.connect(target, 'dragenter',function(e)10. /add style11. dojo.addclass(target, "over");12. )；13.14. dojo.connect(target, 'dragleave', function()15. /remove style16. dojo.removeclass(target, "over");17. )；18.19. dojo.connect(target, 'drop', function(e)

16、20. /remove style if drop is successful21. dojo.removeclass(target, "over");22.23. / stops the browser from redirecting24. if (e.stoppropagation) e.stoppropagation();25.26.27. varitemid = e.datatransfer.getdata('id');28. vardragitem= dojo .byid(itemid);29. e.target.appendchild(drag

17、item);30.31. 圖2.當(dāng)拖動(dòng)節(jié)點(diǎn)到目標(biāo)容器是時(shí)對(duì)目標(biāo)容器進(jìn)行高亮顯示targetsourer表2. datatransfer的常用方法從清單4中我們?cè)谀繕?biāo)容器上對(duì)事件對(duì)象的datatransfer 屬性進(jìn)行了 getdata操作取出了關(guān)鍵字id對(duì)應(yīng)的數(shù)據(jù)。在html 5拖拽過(guò)程中，用戶可以在表 1定義的事件里通過(guò) event.datatransfer 得到datatransfer 對(duì)象（詳見(jiàn) w3c網(wǎng)站上 的接口定義）并對(duì)其進(jìn)行定制傳輸數(shù)據(jù)、定制拖拽影像等操作。例如我們可以在dragstart 事件中通過(guò)setdata方法初始化數(shù)據(jù)（代碼詳見(jiàn)附件）。表2中列出了這各數(shù)據(jù)對(duì)象的方法及常

18、用的用途。庭隊(duì)方沫馴用造題物正能需的d3事件淄申調(diào)用位掘物:駛(foiitafi燉曲在瞄版颯節(jié)而利stert事由笊中觸說(shuō)說(shuō)嬲比-蟠解吸.('dfmat value)占小項(xiàng)小蜀g在爵娥福節(jié)點(diǎn)的d圓steit事件方法中腰荀?加防幀累j助掇世d則.此中磁物翔俅顯示及 (eienent訃)off汩5用qff$etj朗胡可l凝瓶礴動(dòng)中顯示藤削城性璃隔但.w汨吸耽 延酹敏朝節(jié)醐蜘制事件斕牌im動(dòng)口顯示甌左i啰或,燈加用印柳方擊強(qiáng)不能 (e enenf.髓像聒區(qū)y胸的露低用和詢d圓響a品法被th目尾 魂d網(wǎng)何研方法利的水市評(píng)題晨一勺飛亍翻)占杼含野img元案附用輻肥寸的莖或也橫飄觸球瓶揄與桌面進(jìn)行交

19、互除了在網(wǎng)頁(yè)中對(duì)一些頁(yè)面上的元素進(jìn)行拖拽以外，html 5擴(kuò)充的api還允許網(wǎng)頁(yè)與文件系統(tǒng)進(jìn)行交互，比如從文件系統(tǒng)拖一個(gè)或幾個(gè)文件到網(wǎng)頁(yè)中，或是從網(wǎng)頁(yè)拖到文件系統(tǒng)中。以前者為例，當(dāng)我們從桌面或其它文件夾拖動(dòng)文件到網(wǎng)頁(yè)上某個(gè)目標(biāo)結(jié)點(diǎn)時(shí)，我們可以通過(guò)datatransfer 的files屬性得到這些文件數(shù)量以及文件的屬性及內(nèi)容。datatransfer.files.length 的大小即為拖動(dòng)文件的數(shù)量，當(dāng)沒(méi)有拖動(dòng)文件時(shí)，files.length 的大小即為0 ,可用來(lái)判斷是否有文件拖動(dòng)。清單5. 通過(guò)datatransfer.files拿到文件對(duì)象1. var files = e.datatra

20、nsfer.files;2. var msg =""3. for (var i = 0; i < files.length ; i+) 4. console.log ("name: " + + ", filesize:" + filesi.size);5. var datareader = new filereader();6. datareader.onload = function ()7. msg += ("content: " + datareader.result);8. 9

21、. datareader.readastext(filesi);10. 從清單5中的代碼中我們可以看到files 中存儲(chǔ)了若干file對(duì)象，通過(guò)這個(gè)對(duì)象可以獲取文件名，文件大小等。然后我們可以通過(guò)filereader獲取文件的內(nèi)容。獲取內(nèi)容的 filereader 并不是html 5拖拽的功能，而是借助了 file api 。它可 以以文本，二進(jìn)制，以及dataurl的形式讀取，實(shí)現(xiàn)讀取文件內(nèi)容實(shí)現(xiàn)文件上傳等， 在我們的示例代碼 html5dndfile.html 中 我們演示了通過(guò)readastext方法讀取文本文件和通過(guò) readasdataurl方法讀取圖像文件的使用。與桌時(shí)行交互時(shí)，我

22、們只需要對(duì)將清單5中給出的代碼稍加修改加到目標(biāo)容器的drop事件中，其它事件不用修改。例如清單6所示。清單6.在目標(biāo)容器的drop事件讀取文本文件的內(nèi)容1. dojo.connect(textdiv, 'drop', function(e)2. if (e.stoppropagation)3. e.stoppropagation(); / stops the browser from redirecting4. 5. varfiles= e.datatransfer.files;6. varmsg="" ;7. for (var i = 0; i <

23、files.length ; i+) 8. msg += ("name: " + filesi.filename + ", filesize: " + filesi.filesize);9. var datareader = new filereader();10. datareader.onload = function ()11. msg += ("content: " + datareader.result);12. textdiv.textcontent=msg;13. 14. datareader.readastext(filesi);15