《HTML5 开发实例大全》——1.26 使用鼠标光标拖动网页中的文字-小白筆記-匯編語言學習筆記

《HTML5 开发实例大全》——1.26 使用鼠标光标拖动网页中的文字

2023-09-16 阅读 23 评论 0

摘要：本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.26节,作者：张明星更多章节内容可以访问云栖社区“异步社区”公众号查看。 1.26 使用鼠标光标拖动网页中的文字实例说明在HTML 5 中，可以使用属性“draggable”设置是否允许用户拖动网页

本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.26节,作者：张明星更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.26 使用鼠标光标拖动网页中的文字

509ebb1699e5638784623a9fedaaf86dc5513dc9

实例说明

在HTML 5 中，可以使用属性“draggable”设置是否允许用户拖动网页中的元素。属性“draggable”有如下两个值。

true：表示鼠标光标选中元素后，可以进行拖动的操作。
false：表示鼠标光标选中元素后，不能进行拖动的操作，该属性值为默认值。

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

js模拟鼠标移动事件。具体实现

使用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所示。