html5的网上书城设计需求,HTML5网页前端设计实战（Web前端开发技术丛书）

HTML5拖放API项目

本章主要包含两个基于HTML5拖放API的应用设计实例，一是仿回收站效果的设计与实现，二是图片相框展示的设计与实现。在仿回收站项目中，主要难点为元素的拖曳以及回收效果；在图片相框展示项目中，主要难点为文件的拖曳、自动生成带有相框的图片以及显示图片文件信息的技术。

本章学习目标：

* 学习如何综合应用HTML5拖放API、CSS与JavaScript开发仿回收站效果；

* 学习如何综合应用HTML5拖放API、CSS与JavaScript开发图片相框展示效果。

3.1 仿回收站效果的设计与实现

【例3-1】 基于HTML5拖放API的仿回收站效果的设计与实现

背景介绍：在Windows等操作系统中均包含回收站功能，用户可以直接将不需要的文件拖曳并放置到桌面回收站图标上以实现文件的删除。

功能要求：使用HTML5拖放API相关技术在网页上实现仿回收站的类似效果。用户通过拖曳可以将页面上的元素放置到回收站中删除。效果如图3-1所示。

(a)页面初始加载效果

(b)拖动文件2的过程

(c)文件2被删除后的效果

图3-1 仿回收站效果示意图

图3-1以删除文件2为例展示了对文件2拖动与删除的全过程。其他几个文件的操作效果与之完全相同，这里不再重复举例。

3.1.1 界面设计

本节主要介绍仿回收站效果的页面布局，主要包括文件展示区域和回收站区域两个部分。

1．使用

.　　标签划分区域

可以使用

标签区分两个不同的区域：① 文件展示区；② 回收站区。

相关HTML5代码片段如下：

HTML5拖放API之回收站效果

分别为这两个区域的

标签定义id名称为container和recycle，以便后续在CSS的ID选择器中使用。

此时还需要CSS文件辅助渲染样式，因此在本地css文件夹中创建recycle.css文件，并在首尾标签中声明对CSS文件的引用。相关HTML5代码片段如下：

HTML5拖放API之回收站效果

在CSS文件中为文件展示区域的

元素设置样式如下。

* 边框：1像素宽的实线边框；

* 尺寸：宽300像素、高250像素；

* 浮动：向左浮动。

相关CSS代码片段如下：

/*设置用于放置文件夹的区域样式*/

div#container{

border: 1px solid;

width: 300px;

height: 250px;

float: left;

}

在CSS文件中为回收站区域的

元素设置样式如下。

* 尺寸：宽200像素、高200像素；

* 浮动：向左浮动；

* 文本：居中对齐；

* 背景：使用图片背景，素材来源于本地image目录下的recycle.jpg文件；

* 边距：各边的外边距为30像素。

相关CSS代码片段如下：

/*设置回收站样式*/

div#recycle {

width: 200px;

height: 200px;

float: left;

text-align: center;

background: url(../image/recycle.jpg) no-repeat;

margin: 30px;

}

目前尚未在文件展示区域内部添加示例文件，等待接下来补充。

2．使用

标签制作示例文件

为测试文件拖曳与回收的效果，在id="container"的

元素内部继续使用

元素添加4个示例文件。相关HTML5代码片段修改后如下：

文件1

文件2

文件3

文件4

为这4个

标签设置相同的class名称folder，以便在CSS中使用类选择器统一设置样式效果。

在CSS文件中为class="folder"的

标签设置统一样式如下。

* 文本：居中对齐；

* 浮动：向左浮动；

* 边距：各边的外边距为20像素；

* 背景：使用图片背景，素材来源于本地image目录下的folder.png文件；

* 尺寸：宽100像素、高80像素，行高80像素。

相关CSS代码片段如下：

/*设置文件夹样式*/

.folder{

text-align: center;

float: left;

margin: 20px;

background: url(../image/folder.png) no-repeat;

width: 100px;

height: 80px;

line-height: 80px;

}

此时界面设计部分就全部完成了，运行后在浏览器中显示的效果如图3-2所示。

下面介绍如何使用HTML5拖曳API技术实现文件夹的拖曳和删除的效果。

图3-2 仿回收站效果的界面设计完成图

3.1.2 文件拖曳与回收功能的实现

1．文件拖曳的实现

文件拖曳的实现比较简便，为4个用于显示文件夹图标的

元素添加draggable属性并将属性值设置为true即可。HTML5相关代码片段修改后如下：

文件1

文件2

文件3

文件4

此时文件拖曳已经可以实现了。以文件2为例，该文件被拖曳的运行效果如图3-3所示。

图3-3 文件2被拖曳的效果图

由于目前尚未设置可放置区域，因此该文件只可以被拖曳，还无法放置到指定区域。接下来将介绍如何实现设置可放置区域。

2．将回收站区域设置为可放置区域

将元素设置为可放置区域需要添加ondragover事件。本例需要将回收站区域设置为可放置区域，因此在id="recycle"的

元素中添加ondragover事件，并且设置自定义名称的回调函数allowDrop(event)。

HTML5相关代码片段修改后如下：