您好,登錄后才能下訂單哦!
這篇文章主要講解了“HTML5拖放的特性及實(shí)例介紹”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“HTML5拖放的特性及實(shí)例介紹”吧!
拖放(Drag 和 drop)是 HTML5 標(biāo)準(zhǔn)的組成部分。
拖放
拖放是一種常見的特性,即抓取對(duì)象以后拖到另一個(gè)位置。
在 HTML5 中,拖放是標(biāo)準(zhǔn)的一部分,任何元素都能夠拖放。
瀏覽器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖動(dòng)。
注意:Safari 5.1.2不支持拖動(dòng).
HTML5 拖放實(shí)例
下面的例子是一個(gè)簡單的拖放實(shí)例:
<!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html>
它看上去也許有些復(fù)雜,不過我們可以分別研究拖放事件的不同部分。
設(shè)置元素為可拖放
首先,為了使元素可拖動(dòng),把 draggable 屬性設(shè)置為 true :
<img draggable="true">
拖動(dòng)什么 - ondragstart 和 setData()
然后,規(guī)定當(dāng)元素被拖動(dòng)時(shí),會(huì)發(fā)生什么。
在上面的例子中,ondragstart 屬性調(diào)用了一個(gè)函數(shù),drag(event),它規(guī)定了被拖動(dòng)的數(shù)據(jù)。
dataTransfer.setData() 方法設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值:
function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }
感謝各位的閱讀,以上就是“HTML5拖放的特性及實(shí)例介紹”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對(duì)HTML5拖放的特性及實(shí)例介紹這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。