HTML5 学习记录

来源：互联网发布：windows预览体验编辑：程序博客网时间：2024/05/30 22:42

最近看着HTML5越来越流行，不禁想了解下，追一下时代的潮流，不要被“拍死在沙滩上了”~~

学习第一章：摘录自W3C，~~有时间可以去看看，代码自己改动测试过的，觉得有用的可以直接摘录测试（使用Chrome）

原文“Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。注释：在 Safari 5.1.2 中不支持拖放”，但是目前我测试的结果IE9，10都不支持~

只用HTML就实现页面元素的拖动，想测试暂时先用Chrome吧

<!DOCTYPE HTML>
<html>

<head>
<style type="text/css">
#div1
{
width:400px;
height:300px;
border:1px solid red;
float:left;
}
#div2
{
float:left;
width:400px;
height:300px;
border:1px solid red;
}
#drag1
{
float:left;
display:block;
width:154px;
height:152px;
}
</style>
<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>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)">可以拖动图片到这里（A）</div>
<div id="div2" ondrop="drop(event)"
ondragover="allowDrop(event)">可以拖动图片到这里（B）</div>
<img id="drag1" src="http://img.blog.csdn.net/20140530110309734?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZHlwMzMw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast“ draggable="true" ondragstart="drag(event)" />
</body>
</html>

0 0