“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属性演示
源码分析
在代码中，为了实现<article>元素的可拖动效果，必须在元素中添加一个“draggable”属性，并将该属性的值设置为“true”，表示该元素可以进行拖动，实现过程如代码中加粗部分所示。设置完成后，在浏览器中就可以选中该元素，进行拖动的操作。
好了，HTML5 的draggable属性 就介绍到这里，非常感谢你的来访。如果你喜欢本站，请不要忘记收藏本站，以便下次继续访问；也可以 关注站长微博 随时获取最新动态。你的支持就是我最大的动力！
资源演示
转载请注明：爱维科斯 » HTML5 的draggable属性
赏 
支付宝打赏 
微信打赏
支付宝打赏 微信打赏 如果文章对你有帮助，欢迎点击上方按钮打赏作者