HTML5学习笔记

视频播放标签

<video src="" controls="controls" width="320" height="460">
文本，不支持html5时显示
</video>

音频播放标签

<audio src="" controls="controls">
文本，不支持html5时显示
</audio>

拖放（Drag 和 drop）
本部分实例用到的js代码

<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>

首先为了是元素可拖动，把draggable属性设置为true

<img draggable = "true">

然后，规定当元素被拖动时，会发生什么
在下面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据

<img id="drag1" draggable="true" ondragstart="drag(event)" />

放到何处，ondragover 事件规定在何处放置被拖动的数据
默认地，无法将数据/元素放置到其他元素中，如果需要设置允许放置，我们必须阻止对元素的默认处理方式

<div id="div1" ondragover="allowDrop(event)"></div>

进行放置，当放置被拖数据时，会发生 drop 事件。
在下面的例子中，ondrop 属性调用了一个函数，drop(event)

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>