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

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

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

《HTML5 开发实例大全》——1.9 使用 summary 标记元素实现交互
本节书摘来自异步社区<HTML5 开发实例大全>一书中的第1章,第1.9节,作者: 张明星更多章节内容可以访问云栖社区"异步社区"公众号查看. 1.9 使用< ...
《HTML5 开发实例大全》——1.32 在表单中使用 object 元素插入一个Flash
本节书摘来自异步社区<HTML5 开发实例大全>一书中的第1章,第1.32节,作者: 张明星更多章节内容可以访问云栖社区"异步社区"公众号查看. 1.32 在表单中使 ...
Android开发实例大全
<Android开发实例大全> 基本信息作者: 王东华丛书名: Android移动开发技术丛书出版社:电子工业出版社 ISBN:9787121173172 上架时间:2012-8-1 ...
C#开发实例大全（提高卷）
下载地址:网盘下载内容简介 · · · · · · <C#开发实例大全(提高卷)>筛选.汇集了C#开发从基础知识到高级应用各个层面约600个实例及源代码,每个实例都按实例说明.关键技术 ...
bk3432开发的应用实例_《Javaweb开发实例大全》限时免费啦！
Java Web,是用Java技术来解决相关web互联网领域的技术栈.web包括:web服务端和web客户端两部分.Java在客户端的应用有Java Applet,不过使用得很少,Java在服务器端的 ...
Java开发实例大全(PDF)：603个典型事例及源码分析和24个应用方向
内容简介 <Java开发实例大全(基础卷)>筛选.汇集了Java开发从基础知识到高级应用各个层面约600个实例,每个实例按实例说明.关键技术.设计过程.详尽注释.秘笈心法的顺序进行了分析解 ...
c51汇编语言典型例子详解,51单片机典型开发实例大全.pdf
51单片机典型开发实例大全提供电子技术最新最实用设计方案 --单片机 C51 编程规范 typedef unsigned char INT8U; // 无符号 8 位整型变量 // typedef ...
PHP开发实例大全（基础卷）适合菜鸟新手学习
<PHP开发实例大全(基础卷)>筛选.汇集了PHP开发从基础知识到高级应用各个层面的大量实例及源代码,共有600个左右,每个实例及源代码按实例说明.关键技术.设计过程.详尽注释.秘笈心法的 ...
Java开发实例大全提高篇——XML篇
第3篇 XML篇第10章初识XML 10.1 XML语言基础实例297 简单的XML <?xml version="1.0" encoding="UT ...

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

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

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

最新文章

热门文章