html5
2015-09-23 23:40
661 查看
1.拖拽一段文字到一个区域
1. 若想触发ondrop事件,ondragover 中需要阻止默认事件(元素默认是不允许放置的)。
2. 在Firefox 3.5+中,如果是把图像拖放到放置目标上,页面就会转向图像文件;而如果是把文本拖放到放置目标上,则会导致无效URL错误,因此,为了让Firefox支持正常的拖放,还要取消drop事件的默认行为,阻止它打开URL。
阻止浏览器默认行为
e.preventDefault();
当接收完毕之后再组织默认行为一次
1.创建拖拽对象
①给需要拖拽的元素设置draggable属性,它有三个值:
true:元素可以被拖拽;
false:元素不能被拖拽;
auto: 浏览器自己判断元素是否能被拖拽。
2.处理拖拽事件
①当我们拖拽对象的时候会触发拖拽事件包括:
A.dragstart:当元素拖拽开始触发;
B.drag:在元素拖拽过程中触发;
C.dragend:元素拖拽结束时触发
3.创建投放区
①当拖拽对象进入投放区的时候会触发相关的事件
A.dragenter:当拖拽对象进入投放区时触发; B.dragover:拖拽对象在投放区内移动时触发; C.dragleave:拖拽对象没有投放到投放区,离开投放区的 时候触发;
D.drop:拖拽对象投放在投放区时触发。
②注意:dragenter、dragover可能会受到默认事件的影 响,所以我们在这两个事件当中使用 e.preventDefault();来阻止事件默认事件
4.使用dataTransfer传递数据
当我们需要拖拽对象向投放区传递数据的时候用到 dataTransfer有下面的属性和方法:
1.types:返回数据的格式; 2.getData(<format>):返回指定格式数据; 3.setData(<format>, <data>):设置指定格式数据;
4.clearData(<format>):移除指定格式数据; 5.files:返回已经投放的文件的信息数组。
1.type:文件类型 2.size:文件大小 3.name:文件名
3.播放音频
video1.play()--开始
4.播放视频
与播放音频一样,只需把body内的audio标签部分换成下面的video标签的内容,代码如下:
<script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } function drag(e){ e.dataTransfer.setData("Text",e.target.id); } function drop(e){ var data= e.dataTransfer.getData('Text')//---接收数据 e.target.appendChild(document.getElementById(data));//--将接受的数据添加到当前区域 e.preventDefault(); } </script> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ></div> <br /> <p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>注意:
1. 若想触发ondrop事件,ondragover 中需要阻止默认事件(元素默认是不允许放置的)。
2. 在Firefox 3.5+中,如果是把图像拖放到放置目标上,页面就会转向图像文件;而如果是把文本拖放到放置目标上,则会导致无效URL错误,因此,为了让Firefox支持正常的拖放,还要取消drop事件的默认行为,阻止它打开URL。
阻止浏览器默认行为
e.preventDefault();
当接收完毕之后再组织默认行为一次
ondragover="allowDrop(event)" function allowDrop(ev) { ev.preventDefault(); }2.拖拽图片
1.创建拖拽对象
①给需要拖拽的元素设置draggable属性,它有三个值:
true:元素可以被拖拽;
false:元素不能被拖拽;
auto: 浏览器自己判断元素是否能被拖拽。
2.处理拖拽事件
①当我们拖拽对象的时候会触发拖拽事件包括:
A.dragstart:当元素拖拽开始触发;
B.drag:在元素拖拽过程中触发;
C.dragend:元素拖拽结束时触发
3.创建投放区
①当拖拽对象进入投放区的时候会触发相关的事件
A.dragenter:当拖拽对象进入投放区时触发; B.dragover:拖拽对象在投放区内移动时触发; C.dragleave:拖拽对象没有投放到投放区,离开投放区的 时候触发;
D.drop:拖拽对象投放在投放区时触发。
②注意:dragenter、dragover可能会受到默认事件的影 响,所以我们在这两个事件当中使用 e.preventDefault();来阻止事件默认事件
4.使用dataTransfer传递数据
当我们需要拖拽对象向投放区传递数据的时候用到 dataTransfer有下面的属性和方法:
1.types:返回数据的格式; 2.getData(<format>):返回指定格式数据; 3.setData(<format>, <data>):设置指定格式数据;
4.clearData(<format>):移除指定格式数据; 5.files:返回已经投放的文件的信息数组。
1.type:文件类型 2.size:文件大小 3.name:文件名
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> div{ height: 35px; width: 90px; padding: 10px; margin: 20px; border: 1px solid #ccc; float:left; } </style> </head> <script type="text/javascript"> function drag(e){ e.dataTransfer.setData("Text", e.target.id); } function drop(e){ var data= e.dataTransfer.getData('Text') e.target.appendChild(document.getElementById(data)); e.preventDefault(); } function allowDrop(e){ e.preventDefault(); } </script> <div id="layer1" ondragover="allowDrop(event)" ondrop="drop(event)"> <img src="w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" /> </div> <div id="layer2" ondragover="allowDrop(event)" ondrop="drop(event)"></div> </body> </html>
3.播放音频
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>音乐播放</title> <style type="text/css"> button { width: 60px; height: 60px; border-radius: 20px; background-color: orange; font-family: '微软雅黑'; } </style> </head> <body> <audio> <source src="song.mp3" type="audio/mpeg"> 您的浏览器不支持播放! </audio> <button onclick="fun()" id="button">播放</button> </body> <script type="text/javascript"> var flag = 0; function fun() { var video = document.getElementsByTagName("audio")[0]; var but = document.getElementById("button"); if(flag == 0) { but.innerHTML = "暂停"; video.play(); flag = 1; } else { but.innerHTML = "播放"; video.pause(); flag = 0; } } </script> </html>注:video1.pause()---暂停
video1.play()--开始
4.播放视频
与播放音频一样,只需把body内的audio标签部分换成下面的video标签的内容,代码如下:
<video > <source src="iceage4.mp4" type="video/mp4"> </video>
相关文章推荐
- html5基础(第一天)
- HTML5
- html5基础
- html5基础
- Html5常用语义标签、拖拽功能、音频、视频总结
- HTML5
- html5
- html5
- html5 构造网页的新方式
- html5
- 探索Ionic过程中的一些亮点与各种坑整理
- H5性能优化方案
- HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系
- 【html5多媒体】自定义播放器(弹幕,水印,甚至在视频开头添加封面)
- Html5 Api 实现浏览器全屏
- html5实现多文件上传
- html5 video
- 利用HTML5云存储实现模拟对比投票效果
- html5学习笔记(二)
- 浅谈html5网页内嵌视频(转)