您好,登錄后才能下訂單哦!
小編給大家分享一下html5規(guī)定元素是否可拖動的屬性draggable怎么用,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
實例
一個可拖動的段落:
<p draggable="true">這是一個可拖動的段落。</p>
瀏覽器支持
IE
Firefox
Chrome
Safari
Opera
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari 支持 draggable 屬性。
注釋:Internet Explorer 8 以及更早的版本,不支持 draggable 屬性。
定義和用法
draggable 屬性規(guī)定元素是否可拖動。
提示:鏈接和圖像默認(rèn)是可拖動的。
提示:draggable 屬性常用在拖放操作中。請在我們的拖放教程中學(xué)習(xí)更多內(nèi)容。
HTML 4.01 與 HTML5 之間的差異
draggable 屬性是 HTML5 中的新屬性。
語法
<element draggable="true|false|auto">
屬性值
值 | 描述 |
true | 規(guī)定元素的可拖動的。 |
false | 規(guī)定元素不可拖動。 |
auto | 使用瀏覽器的默認(rèn)行為。 |
實例:
<!DOCTYPE html> <html class="no-js"> <head> <meta charset="utf-8"> <title>HTML5-draggable(拖放)</title> <style type="text/css"> #div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;} </style> <script src="js/modernizr.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> /* * 雖然已經(jīng)設(shè)定了img元素可被拖動,但是瀏覽器默認(rèn)地,無法將數(shù)據(jù)/元素放置到其他元素中。 * 如果有需要設(shè)置某些元素可接受被拖動元素,則要阻止它的默認(rèn)行為, * 這要通過設(shè)置該接收元素的ondragover 事件,調(diào)用event.preventDefault() 方法 */ function allowDrop(ev) { ev.preventDefault(); //阻止默認(rèn)行為 //ev.target.id //此處ev.target是接收元素,通過事件被綁定在哪個元素即可區(qū)分 } /* * 當(dāng)該img元素被拖動時,會觸發(fā)一個ondragstart 事件,該事件調(diào)用了一個方法drag(event)。 */ function drag(ev) { //ev.dataTransfer.setData() 方法設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型(Text)和值(被拖元素id), //該方法將被拖動元素的id存儲到事件的dataTransfer對象內(nèi),ev.dataTransfer.getData()可將該元素取出。 //此處ev.target是被拖動元素 ev.dataTransfer.setData("Text", ev.target.id); } /* * 當(dāng)被拖元素移動到接收元素, * 松開鼠標(biāo)時(即被拖元素放置在接收元素內(nèi)時)會出發(fā)ondrop事件 */ function drop(ev) { ev.preventDefault(); //阻止默認(rèn)行為 var data = ev.dataTransfer.getData("Text"); //將被拖動元素id取出 ev.target.appendChild(document.getElementById(data)); //將被拖動元素添加到接收元素尾部 } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <!--為了使元素可拖動,把 draggable 屬性設(shè)置為 true--> <img src="http://www.w3school.com.cn/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" /> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html>
以上是“html5規(guī)定元素是否可拖動的屬性draggable怎么用”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。