{
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>
<p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
</p>
<p id="p2" ondrop="drop(event)" ondragover="allowDrop(event)"></p>
HTML5 Web存储
在讲HTML5 的Web存储之前，先来说说cookie劣势，主要有以下三点：
Cookie会被附加在每个HTTP请求中，无形中增加了流量。
由于在HTTP请求中的Cookie是明文传递的，所以安全性成问题。（除非用HTTPS）
Cookie的大小限制在4KB左右。对于复杂的存储需求来说是不够用的。
再来看看HTML5 Web存储的优势：
没有额外的的请求头部数据
丰富的方法去设置、读取、移除数据
默认5MB存储限制
在HTML5中，Web存储有两种形式：localStorag、sessionStorage，如下：
localStorage
存储的数据没有时间限制；
JavaScript Code复制内容到剪贴板
<script type="text/javascript">
localStorage.lastname="Smith";
document.write("Last name: " + localStorage.lastname);
</script>
sessionStorage
当用户关闭浏览器窗口后，数据会被删除
JavaScript Code复制内容到剪贴板
<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>
Tips:
Cookie是不可或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。
