建站知識(shí)

Website development

北京網(wǎng)站制作html5拖曳操作 HTML5實(shí)現(xiàn)網(wǎng)頁(yè)元素的拖放操作

發(fā)布時(shí)間：2016-04-12 10:44:49

HTML5之前，要實(shí)現(xiàn)網(wǎng)頁(yè)元素的拖放操作，需要依靠mousedown、mousemove、mouseup等API，通過大量的JS代碼來實(shí)現(xiàn),而如今html5大大簡(jiǎn)化了網(wǎng)頁(yè)元素的拖放操作編程難度,API除了支持瀏覽器內(nèi)部元素的拖放外，同時(shí)支持瀏覽器和其它應(yīng)用程序之間的數(shù)據(jù)互相拖動(dòng)

HTML5之前，要實(shí)現(xiàn)網(wǎng)頁(yè)元素的拖放操作，需要依靠mousedown、mousemove、mouseup等API，通過大量的JS代碼來實(shí)現(xiàn)；HTML5中引入了直接支持拖放操作的API，大大簡(jiǎn)化了網(wǎng)頁(yè)元素的拖放操作編程難度，并且這些API除了支持瀏覽器內(nèi)部元素的拖放外，同時(shí)支持瀏覽器和其它應(yīng)用程序之間的數(shù)據(jù)互相拖動(dòng)。

本文通過一個(gè)簡(jiǎn)單示例，演示HTML5中拖放API的使用方法。

場(chǎng)景：

如下圖所示，我們要實(shí)現(xiàn)：

通過拖放將照片從左側(cè)“相冊(cè)”區(qū)域拖拽到右側(cè)“垃圾箱”區(qū)域；拖拽過程中，“溫馨提示”部分要及時(shí)提醒，當(dāng)前正在進(jìn)行拖放操作；

實(shí)現(xiàn)方法：

如上界面的HTML代碼比較簡(jiǎn)單，如下：

注意：如果要實(shí)現(xiàn)拖放操作，需要在待拖放的元素上增加draggable="true"屬性；

接下來，再在onload事件中增加如下JS代碼即可，注釋比較詳盡，就不再單獨(dú)解釋。

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://www.mpian.cn/i,72,6421,0.html

上一篇：北京網(wǎng)站制作怎樣判斷網(wǎng)站是html5網(wǎng)站呢

下一篇：北京網(wǎng)站制作運(yùn)營(yíng)小型的B2B網(wǎng)站應(yīng)該注意的細(xì)節(jié)有哪些。

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁(yè)面風(fēng)
格設(shè)計(jì)
程序設(shè)
計(jì)研發(fā)
資料錄
入優(yōu)化
確認(rèn)交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標(biāo)簽

Website development

客戶評(píng)價(jià)

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個(gè)項(xiàng)目周期內(nèi)，云智互聯(lián)對(duì)待我們并不像是對(duì)待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細(xì)致地完成我們的每一個(gè)需求，再次感謝以至誠(chéng)之心做事的云智互聯(lián)團(tuán)隊(duì)。

潘濤
我是東方龍馬集團(tuán)，在云智家做了2個(gè)企業(yè)官網(wǎng)，服務(wù)態(tài)度超級(jí)好。如果想做網(wǎng)站，選擇他家一定不后悔。性價(jià)比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計(jì)精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運(yùn)行方便，后臺(tái)操作的簡(jiǎn)單。技術(shù)還會(huì)耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯(cuò)的。

陳曦
不錯(cuò)，價(jià)格比較合適，重點(diǎn)是響應(yīng)速度蠻快，有什么問題都會(huì)馬上給你解決，公司很滿意，因?yàn)樗麄兌际轻槍?duì)每個(gè)項(xiàng)目建了相應(yīng)的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時(shí)。

張經(jīng)理