HTML5音频和拖放介绍

一、HTML5音频介绍

HTML5 规定了一种通过 audio 元素来包含音频的标准方法。

音频格式和浏览器支持如下所示：

.ogg	FireFox 3.5+，chrome 3.0+，Opera 10.5+
.mp3	Safari 3.0+，chrome 3.0+，IE 9.0+
.wav	FireFox 3.5+，Safari 3.0+，Opera10.5+

例子：

注： 与 之间插入的内容是供不支持 audio 元素的浏览器显示的。audio 元素允许多个 source 元素，source 元素可以链接不同的音频文件，浏览器将使用第一个可识别的格式。

引入单个文件也可以这样写：

audio 标签的属性如下所示：

二、HTML5拖放概述

拖放（Drag 和 drop）是 HTML5 标准的组成部分，任何元素都能够拖放，从字面意思上来理解，拖放就是抓取对象后拖到另一个位置上。

注：img元素和 a 元素（必须指定 href）默认允许拖放。

打开 Terminal 终端：

在 Terminal 中输入以下命令获取本节使用到的图片：

wget http://labfile.oss.aliyuncs.com/courses/1248/drag-image.png

图片的下载位置，请注意在后续 html 文件所在同目录下。
浏览器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

注释：在 Safari 5.1.2 中不支持拖放。

三、HTML5 拖放使用
例子：

  
    
    
    
    
  

  
    
请把图片拖放到矩形中：
    

    

    
  

运行效果为：

下面介绍拖放是如何实现的。

确定什么是可拖动的
为了使元素可拖放，首先把 draggable 属性设置为 true，再加上全局事件处理函数 ondragstart，如下所示：

定义拖动数据
每个 drag event 都有一个 dataTransfer 属性保保存事件的数据。这个属性（ DataTransfer 对象）也有管理拖动数据的方法。setData() 方法添加一个项目的拖拽数据，如下面的示例代码所示：

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

在这个例子中数据类型是 “Text”，值是可拖动元素的 id (“drag1”)。

定义一个放置区
ondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式,如下所示：

function allowDrop(ev) {
  ev.preventDefault();
}

进行放置
当放置被拖数据时，会发生 drop 事件。如下所示：

function drop(ev) {
  //调用 preventDefault() 来避免浏览器对数据的默认处理
  ev.preventDefault();
  //通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
  var data = ev.dataTransfer.getData("Text");
  //被拖数据是被拖元素的 id ("drag1"),把被拖元素追加到放置元素（目标元素）中
  ev.target.appendChild(document.getElementById(data));
}