《基于新信息技术的HTML5和CSS3网页设计进阶教程》课件-第3章

第3章HTML5的拖放3.1浏览器支持检测3.2实现简单拖放3.3拖放相关的属性和事件3.4dataTransfer对象3.5拖放图片到浏览器

3.1浏览器支持检测

InternetExplorer9、Firefox、Opera12、Chrome以及Safari5支持拖放。我们可以通过以下代码来测试浏览器是否支持HTML5拖放特性。

3.2实现简单拖放

例3-1拖动前页面效果如图3-1所示，页面中有一个方框，方框下有一张图片，将图片拖动放入方框中。图3-1拖动前页面效果

拖动效果实现代码如下：

拖放后页面效果如图3-2所示。

图3-2拖动后页面效果

实现拖动的思路是：当光标在图片上按住鼠标左键进行移动时，将被该图片元素的id存入dataTransfer对象中；当光标移动到目标div元素中放开鼠标左键时，将被记录了id的图片元素设置为该div元素的子元素。在这个过程中，我们称被拖动的元素为源元素，拖动的目的地为目的地元素。

同时，目的地元素默认拒绝接收被拖放的元素，我们在页面拖动元素的过程中，需要通过preventDefault()方法关闭目的地元素默认行为。

在上面的代码中，首先是题目提供的内容：一张图片和一个div元素。其代码如下：

当鼠标左键在目的地元素内松开时，关闭目的地元素的默认行为，再从dataTransfer对象中将保存在其中的id取出来，通过此id找到源元素，再将源元素设置为目的地元素的子元素。编写以下JavaScript代码，绑定到目的地元素的ondrop事件。

3.3拖放相关的属性和事件

1.拖放相关的属性要实现元素的拖放，需要先设置元素的draggable="true"属性，即将元素设置为可拖放。在上面的例子中并没有设置这个属性，因为链接和图片默认是可拖放的，不需要设置draggable属性。

属性设置语法如下：

● true:可以拖动。

● false:禁止拖动。

● auto:跟随浏览器定义是否可以拖动。

2.拖放相关的事件

与拖放相关的元素有两个，在拖放的过程中会分别触发如表3-1所示的事件。

ondragenter、ondragover和ondrop事件的默认行为是拒绝接收任何被拖放的元素，因此，我们必须阻止浏览器这种默认行为。通过event.preventDefault()方法可以阻止浏览器默认行为(对于火狐浏览器，需要使用event.stopPropagation()方法阻止浏览器默认行为)。

3.4dataTransfer对象

1. dataTransfer对象的属性

dataTransfer对象列入标准的属性有4个，如表3-2所示。

2. dataTransfer对象的方法

dataTransfer对象列入标准的方法有4个，如表3-3所示。

3.5拖放图片到浏览器

HTML5可以实现从本地拖放文件到浏览器中，利用FileReader对象读取文件，并进行后续操作。此功能一般应用在图片拖放和文件上传操作中，将本地图片拖放并显示到页面指定位置或为文件选择控件提供直接拖放功能。

例3-2拖动本地图片放入页面指定的位置。

拖放图片到浏览器的代码如下：

拖入图片前页面显示效果如图3-3所示，拖入图片后页面显示效果如图3-4所示。

图3-3拖入图片前页面显示图3-4拖入图片后页面显示

需要注意的是：拖动本地文件到浏览器，当浏览器支持拖放文件格式时，浏览器默认会打开本地文件；当浏览器不支持拖放文件格式时，浏览器会默认触发下载器下载该文件。同时，不同浏览器打开本地文件的方式有所不同。

●

Chrome：如果该文件是浏览器可浏览文件(图片等)，浏览器会在当前窗口打开文件的预览。

●

FireFox：如果该文件是浏览器可浏览文件(图片等)，浏览器会在新窗口打开文件的预览。

●

IE：如果该文件是浏览器可浏览文件(图片等)，浏览器会在当前窗口打开文件的预览。

要阻止浏览器的默认行为，直接为目的地元素添加事件的方法是不行的，只能通过JavaScript在页面加载完成后为目的地元素追加相应方法。关键代码如下：

在ondrop事件中，先阻止元素的默认行为；再通过dataTransfer对象获取文件列表，因为我们只拖动一个图片文件，因此可以直接通过下标[0]找到文件，获取文件类型；然后创建一个img元素和一个FileReader对象；接下来判断获取的文件类型是否支持img元素，如果不支持，则给出提示并返回；如果img元素支持文件类型，则使用FileRea