最新消息:

HTML5 的draggable属性

“draggable”属性用于设置是否允许用户拖动元素,该属性有两个值,分别为:“true”表示鼠标选中元素后,可以进行拖动的操作;“false”表示鼠标选中元素后,不能进行拖动的操作,该属性值为默认值。

下面来介绍该属性在元素中的使用方法。

功能描述

在页面中,使用<article>元素显示一段文字,并设置<article>元素的属性“draggable”值为“true”,当用户选中这段文字移动鼠标时,可以实现拖动的效果。

实现代码

在 Sublime Text 3 中新建一个 HTML 页面 draggable.html,加入如下代码:

<html>
 <head>
 <meta charset="utf-8" />
 <title>draggable 属性的使用</title>
 </head>
 <body>
 <h5>元素的拖动属性</h5>
 <article draggable="true">
 这是一段可以拖动的文字, 选中后进行拖动。
 </article>
 </body>
</html>

页面效果

该页面在 Chrome 或者使用 Chrome 内核的浏览器下执行的页面效果如图所示。

HTML5 的draggable属性演示

HTML5 的draggable属性演示

源码分析

在代码中,为了实现<article>元素的可拖动效果,必须在元素中添加一个“draggable”属性,并将该属性的值设置为“true”,表示该元素可以进行拖动,实现过程如代码中加粗部分所示。设置完成后,在浏览器中就可以选中该元素,进行拖动的操作。

好了,HTML5 的draggable属性 就介绍到这里,非常感谢你的来访。如果你喜欢本站,请不要忘记收藏本站,以便下次继续访问;也可以 关注站长微博 随时获取最新动态。你的支持就是我最大的动力!



转载请注明:爱维科斯 » HTML5 的draggable属性

支付宝打赏支付宝打赏 微信打赏微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者