最近看着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" οndrοp="drop(event)"
οndragοver="allowDrop(event)">可以拖動圖片到這裏（A）</div>
<div id="div2" οndrοp="drop(event)"
οndragοver="allowDrop(event)">可以拖動圖片到這裏（B）</div>
<img id="drag1" src="https://img-blog.csdn.net/20140530110309734?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZHlwMzMw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast“
draggable="true" οndragstart="drag(event)" />
</body>
</html>