如何用html制作旅,从零开始的HTML5之旅（三）

HTML5音频

HTML5规定了一种通过audio元素包含音频的方法。audio能够播放声音文件和音频流。

音频格式

格式

IE9

Firefox 3.5

Opera 10.5

Chrome 3.0

Safari3.0

支持

—

—

支持

支持

—

支持

支持

—

支持

从上面的格式中我们可以知道，在实际应用中仅仅只需要用到Ogg格式和Mp3格式。

audio的属性、方法、事件和video基本一致，可以参考从零开始的HTML5之旅(二)。

音频Demo

Document

开始

暂停

var id = document.getElementById("audio1");

function Play() {

id.play();

}

function Pause(){

id.pause();

}

HTML5拖放

拖放是HTML5的标准的组成部分。它是种常见的特性，就是将一个东西抓取然后拖到另一个位置放下。在HTML5种，任何元素都能进行拖放。

浏览器支持

IE9+、Firefox、Opera、Chrome、Safari都支持拖放。

拖动时的事件

事件

描述

ondragstart

用户开始拖动元素时触发

ondrag

元素正在拖动时触发

ondragend

用户完成元素拖动后触发

释放目标时的事件

事件

描述

ondragenter

当被鼠标拖动的对象进入其容器范围内时触发此事件

ondragover

当某被拖动的对象在另一对象容器范围内拖动时触发此事件

ondragleave

当被鼠标拖动的对象离开其容器范围内时触发此事件

ondrop

在一个拖动过程中，释放鼠标键时触发此事件

设置可拖动

……

用ondragstart和setData()给目标设值

//以下是js中的代码

function drag(e){

e.dataTransfer.setData("Text",e.target.id)

}

这个代码中，数据类型是"Text"，元素id则为"drag1"。

规定在何处放置目标

ondragover事件规定在哪里放置被拖动的数据。HTML中默认是不能将元素放在其他元素中的，因此，需要我们主动设置允许放置。这就需要用到ondragover事件中的e.preventDefault()方法。

function allowDrop(e){

e.preventDefault();

}

放置

ondrop：在一个拖动过程中，释放鼠标键时触发此事件

这里直接放上代码：

function drop(e){

e.preventDefault(); //避免浏览器对数据的默认处理

var data=e.dataTransfer.getData("Text"); //声明变量data,将获取的数据存到data中。此方法返回setData()中设置为相同数据的任何数据,其中被获取的数据是ID为drag1的元素。

e.target.appendChild(document.getElementById(data)); //将被拖元素放置在新容器中

}

完整代码

拖放Demo

function allowDrop(e)

{

e.preventDefault();

}

function drag(e)

{

e.dataTransfer.setData("Text",e.target.id);

}

function drop(e)

{

e.preventDefault();

var data=e.dataTransfer.getData("Text");

e.target.appendChild(document.getElementById(data));

}

标签：function,之旅,拖动,从零开始,HTML5,data,id,拖放

来源： https://www.cnblogs.com/ODevil/p/12494936.html