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

draggable屬性的用法

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

1577370495235_學(xué)IT就到黑馬程序員.gif

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

draggable屬性用來定義元素是否可以拖動(dòng)，該屬性有兩個(gè)值：true和false，默認(rèn)為false，當(dāng)值為true時(shí)表示元素選中之后可以進(jìn)行拖動(dòng)操作，否則不能拖動(dòng)。

下面通過一個(gè)案例對(duì)draggable屬性的用法進(jìn)行演示。

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

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


注意：

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



猜你喜歡：

Html5 aside標(biāo)簽的用法和作用

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

nav標(biāo)簽怎么用？nav標(biāo)簽的有什么作用？

圖像標(biāo)簽基本特點(diǎn)和相關(guān)屬性

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

分享到：
在線咨詢 我要報(bào)名
和我們?cè)诰€交談！