本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.26节,作者： 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。
1.26 使用鼠标光标拖动网页中的文字
实例说明
在HTML 5 中，可以使用属性“draggable”设置是否允许用户拖动网页中的元素。属性“draggable”有如下两个值。
- true：表示鼠标光标选中元素后，可以进行拖动的操作。
- false：表示鼠标光标选中元素后，不能进行拖动的操作，该属性值为默认值。
在本实例中，使用< article >元素显示一段文字，并设置< article >元素的属性“draggable”值为“true”，当用户选中这段文字移动鼠标光标时，可以实现拖动的效果。
具体实现
使用Dreamweaver创建一个名为“026.html”的文件，具体代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>使用draggable属性</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<h5>元素的拖动属性</h5>
<article draggable="true" class="p3_7">
这是一段可以拖动的文字,选中后进行拖动。
</article>
</body>
</html>
在上述代码中，为了实现< article >元素的可拖动效果，必须在元素中添加一个“draggable”属性，并将该属性的值设置为“true”，表示该元素可以进行拖动，实现过程如代码中所示。设置完成后，在浏览器中就可以选中该元素，进行拖动的操作，执行效果如图1-45所示。
