从零开始的HTML5之旅（三）
2021-04-06 17:25
阅读：445
YPE html>
标签：lang click java image 目标 meta char 设值 标准
HTML5音频
??HTML5规定了一种通过audio元素包含音频的方法。audio能够播放声音文件和音频流。
音频格式
| 格式 | IE9 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari3.0 |
|---|---|---|---|---|---|
| Ogg Vorbis | — | 支持 | 支持 | 支持 | — |
| Mp3 | 支持 | — | — | 支持 | 支持 |
| Wav | — | 支持 | 支持 | — | 支持 |
??从上面的格式中我们可以知道，在实际应用中仅仅只需要用到Ogg格式和Mp3格式。
??audio的属性、方法、事件和video基本一致，可以参考从零开始的HTML5之旅（二）。
音频Demo
Document
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
从零开始的HTML5之旅（三）
标签：lang click java image 目标 meta char 设值 标准
原文地址：https://www.cnblogs.com/ODevil/p/12494936.html
上一篇：（八）多线程之queue
下一篇：HTML
评论
亲，登录后才可以留言！