标签：
一、原生拖放
最早在网页中引入javascript拖放功能的是IE4，当时，网页中只有两种对象可以拖放：图像和某些文本。而现在，几乎网页中的任何元素都可以拖放以及作为放置目标。下面介绍一些与拖放相关的内容：
1、拖放事件
在拖放事件中，将依次在被拖动的元素和作为放置目标的元素上触发3个事件：
被拖动的元素：dragstart----drag----dragend
作为放置目标的元素：dragenter----dragover---dragleave(元素被拖出了目标)或drop(元素被放到了放置目标中)
2、自定义放置目标
在拖动元素经过某些无效的放置目标时，可以看到一种特殊的光标(圆环中有一条反斜线)，表示不能放置。通过重写dragenter和dragover事件的默认行为，以及取消drop事件的默认行为(在firefox)，可以支持任意元素成为放置目标。
var droptarget = document.getElementById("droptarget"); // 阻止dragover的默认行为 EventUtil.addHandler(droptarget, "dragover", function(event){ EventUtil.preventDefault(event); }); // 阻止dragenter的默认行为 EventUtil.addHandler(droptarget, "dragenter", function(event){ EventUtil.preventDefault(event); }); // 阻止drop的默认行为 EventUtil.addHandler(droptarget, "drop", function(event){ EventUtil.preventDefault(event); });
3、dataTransfer对象
只是简单的拖放而没有数据变化是没有什么用处的。为了在拖放操作时，实现数据交换，ie5实现了dataTransfer对象，它有setData()和getData()两个方法。例如当拖动某个文本时，浏览器会调用setData方法，将拖动的文本以“text”格式保存在dataTransfer对象中；当元素被拖放到放置目标时，通过getData()读取数据。
// 设置和接受文本数据 event.dataTransfer.setData("text", "some text"); var text = event.dataTransfer.getData("text"); // 设置和接受URL // 将数据保存成URL格式，浏览器会将其当成网页中的链接 event.dataTransfer.setData("URL", "http://www.baidu.com"); var url = event.dataTransfer.getData("URL");
4、dropEffect和effectAllowed
dataTransfer对象具有dropEffect和effectAllowed两个属性，通过它们可以确定被拖动的元素以及作为放置目标的元素能够接收什么操作。
5、可拖动
默认情况下，只有图像、链接和文本是可拖动的。对于其他元素，添加属性draggable="false", 则让其不可拖动；添加属性draggable="true", 则可拖动。
二、媒体元素
1、页面中嵌入媒体元素
HTML5新增了<audio>和<video>标签，使不必依赖任何插件就能在网页中嵌入跨浏览器的音频是视频内容。这两个标签页提供了很多事件和属性，来提供媒体当前状态的信息。
<!-- 嵌入视频--> <video id="myVideo"> <!-- 并非所有的浏览器都支持所有的格式，因此可以指定多个不同的媒体来源 --> <source scr="1.webm" type="video/webm; codecs=‘vp8, vorbis‘"> <source scr="2.ogv" type="video/ogg; codecs=‘theora, vorbis‘"> <source scr="3.mpg"> <!-- 开始和结束标签的内容属于后备内容，在浏览器不支持这两个媒体元素的时候显示 --> Video player not available. </video> <!-- 嵌入音频 --> <audio id="myAudio"> <source scr="song1.ogg" type="audio.ogg"> <source scr="song2.mp3" type="audio.mpeg"> Audio player not available. </audio>
2、自定义媒体播放器
<!doctype html> <html> <head> <meta charset="utf-8"> <title>自定义媒体播放器</title> </head> <body> <div class="mediaPlayer"> <div class="video"> <video src="1.mp4" id="player" poster="image1.png" width="300" height="200"> Video Player not available. </video> </div> <div class="controls"> <input type="button" value="play" id="video-btn"> <span id="curtime">0</span>/<span id="duration">0</span> </div> </div> <script> // 取得元素的引用 var player = document.getElementById("player"), btn = document.getElementById("video-btn"), curtime = document.getElementById("curtime"), duration = document.getElementById("duration"); // 为按钮添加时间处理程序,这里使用的是DOM2级事件处理程序，不支持IE btn.addEventListener("click", function(){ if(player.paused){ player.play(); btn.value = "pause"; }else{ player.pause(); btn.value = "play"; } },false); // 定时更新时间 setInterval(function(){ curtime.innerHTML = player.currentTime; duration.innerHTML=player.duration; },250); </script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/bluebirid/p/5755123.html
