本节书摘来自异步社区《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所示。