首页技术文章正文

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属性使用效果展示


注意:

本案例在网页中所实现的效果并不能拖动,如果要想真正实现拖动功能,必须与 JavaScript结合使用。



猜你喜欢:

Html5 aside标签的用法和作用

HTML5结构标签header的用法

nav标签怎么用?nav标签的有什么作用?

图像标签基本特点和相关属性

黑马程序员HTML&JS+前端开发课程

分享到:
在线咨询 我要报名
和我们在线交谈!