首頁技術(shù)文章正文

draggable屬性的用法

更新時間:2021-04-16 來源:黑馬程序員 瀏覽量:

1577370495235_學IT就到黑馬程序員.gif

全局屬性是指在任何元素中都可以使用的屬性，在HTML5中常用的全局屬性有draggable、hidden、spellcheck和contenteditable，下面介紹draggable屬性。

draggable屬性用來定義元素是否可以拖動，該屬性有兩個值：true和false，默認為false，當值為true時表示元素選中之后可以進行拖動操作，否則不能拖動。

下面通過一個案例對draggable屬性的用法進行演示。

<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>draggable屬性的應用</title>
</head>
<body>
    <h3>元素拖動屬性</h3>
    <article draggable="true">這些文字可以被拖動</article>
    可拖動的圖片<img src="itpeixun.gif" draggable="true">
</body>
</html>

1618555727384_draggable.jpg
draggable屬性使用效果展示


注意：

本案例在網(wǎng)頁中所實現(xiàn)的效果并不能拖動，如果要想真正實現(xiàn)拖動功能，必須與 JavaScript結(jié)合使用。



猜你喜歡：

Html5 aside標簽的用法和作用

HTML5結(jié)構(gòu)標簽header的用法

nav標簽怎么用？nav標簽的有什么作用？

圖像標簽基本特點和相關屬性

黑馬程序員HTML&JS+前端開發(fā)課程

分享到：
在線咨詢 我要報名
和我們在線交談！