H5--拖放、媒体元素、web存储

将元素设置成可拖放draggable = "true"

拖放元素：ondrag // 整个拖放过程都调用

ondragstart // 拖放开始时调用

ondragleave // 鼠标离开拖放元素时调用

ondragend // 拖放结束时调用

目标元素：ondragenter // 鼠标进入目标时调用

ondragover // 停留在目标元素上时调用

ondragdrop // 在目标元素松开鼠标时调用

ondragleave // 鼠标离开目标元素时调用

注意：浏览器默认阻止ondrop事件，所以要在ondragover中阻止默认行为

e.dataTransfer保存拖放到浏览器的数据，获取时，只能在ondrop事件中获取

e.dataTransfer.setData(mime类型, 数据); e.dataTranster.getData(mime类型)

mime类型：text/html text/plain text/uri-list text/xml

例子：

补4张图，不会上传gif图，只能这样了

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		div {
			margin-left: 10px;
			float: left;
			width: 150px;
			height: 300px;
			border: 1px solid red;
		}
		li {
			list-style: none;
			height: 20px;
			text-align: center;
			line-height: 20px;
		}
		li:nth-child(even) {
			background-color: yellow;
		}
		li:nth-child(odd) {
			background-color: red;
		}
	</style>
</head>
<body>
	<div id="div1">
		<ul>
			<li draggable = "true" id="p1">拖走我啊-.-</li>
			<li draggable = "true" id="p2">拖我啊o.o</li>
			<li draggable = "true" id="p3">带走我吧-,-</li>
		</ul>
	</div>
	<div id="div2">
		<ul></ul>
	</div>

	<script src="my.js"></script>
	<script>
		var div1 = document.getElementById("div1");
		var div2 = document.getElementById("div2");
		EventUtil.addEventListener(div1, "dragstart", dragstartHandle);

		EventUtil.addEventListener(div2, "dragstart", dragstartHandle);

		EventUtil.addEventListener(div2, "dragover", dragoverHandle);

		EventUtil.addEventListener(div1, "dragover", dragoverHandle);

		EventUtil.addEventListener(div2, "drop", dropHandle);

		EventUtil.addEventListener(div1, "drop", dropHandle);

		function dragstartHandle(e) {
			e = EventUtil.getEvent(e);
			var target = EventUtil.getTarget(e);
			e.dataTransfer.setData("text/html", target.id);
		}

		function dragoverHandle(e) {
			e = EventUtil.getEvent(e);
			EventUtil.preventDefault(e);
		}

		function dropHandle(e) {
			e = EventUtil.getEvent(e);
			var target = EventUtil.getTarget(e);
			var id = e.dataTransfer.getData("text/html");
			var ul = target.children[0];
			ul.appendChild(document.getElementById(id));
		}
	</script>
</body>
</html>

音频(audio)和视频(video) （两个的属性是差不多的）

您的浏览器不支持video，赶紧换一个吧

</video>

autoplay：自动播放 controls：显示/隐藏控件 loop：循环播放

元素全屏：ele.requestFullscreen(); （这里要兼容，要加前缀）

播放与暂停：ele.play(); ele.pause();

当前播放进度与总时长：ele.currentTime ele.duration （得到的是以秒为单位的小数，要转换成00:00:00格式）

oncanplay：可以播放视频/音频时触发

ontimeupdate：报告当前的播放进度

onended：播放完时触发，播放停止

web存储

window.sessionStorage：临时存储数据，5mb左右

①存储在当期页面（重新或再打开就没了） ②关闭页面，清除数据

setItem(key,value)：以键值对存储数据

getItem(key)：获取数据

removeItem(key)：删除数据

clearItem()：清空所以内容

window.localStorage：存储在硬盘上，网页关了，再打开也存在（方法与上面一样）

H5--拖放、媒体元素、web存储

猜你喜欢