HTML5元素拖拽、视频、音频

来源:互联网 发布:mysql 表水平拆分 编辑:程序博客网 时间:2024/05/16 01:44
## 关于文字与图片的拖拽 ##
1 给对象设置可拖拽属性

 `draggable='true'`
 
2 给对象绑定起始拖拽事件
 
 `ondragestart='drag(event)`
 
3 设置事件data

 `function drags(e){
            e.dataTransfer.setData("Text",e.target.id);
        }`
4 给目标位置标签设置拖拽过程的事件 

`ondrop="drops(event)"`

5 接收对象传过来的参数,插入当前标签内(阻止浏览器默认行为`preventDefault`

    `function drops(e){
            var data=e.dataTransfer.getData('Text');
            e.target.appendChild(document.getElementById(data));
            e.preventDefault();
        }`
6 最后给目标标签设置拖拽结束事件`ondragover="over(event)"`,再次阻止浏览器默认行为

    `function over(e){
            e.preventDefault();
        }`
7 若要再次反向拖拽回去就要在此事件的父级标签内绑定拖拽过程以及拖拽结束事件`ondrop="drops(event)" ondragover="over(event)"`

## HTML5 video(视频)标签的使用 ##
1. 此标签的属性:
    1. src:播放此视频的路径
    2. width:宽
    3. height:高
    4. controls:播放控件的显示`controls='controls'`
    5. autoplay:就绪后马上播放控件`autoplay='autoplay'`
    6. loop:重复播放
    7. preload:页面加载时进行播放若有autoplay属性则忽略该属性
2. 方法:
    1. play():播放功能
    2. pause():暂停功能

3. 视频格式:
    1. ogg
    2. mp4
    3. webM


## HTML5 audio(音频)标签使用 ##
1. 此标签的属性:
    1. src:播放此视频的路径
    2. controls:播放控件的显示`controls='controls'`
    3. autoplay:就绪后马上播放控件`autoplay='autoplay'`
    4. loop:重复播放
    5. preload:页面加载时进行播放若有autoplay属性则忽略该属性

2. 视频格式:
    1. ogg
    2. mp3
    3. wav
0 0
原创粉丝点击