最近几天在瞎忙，耽搁不少时间，今天就把HTML5拖放实际操作，下面就是我编写全过程。
根据前几天复习掌握的HTML5 drap and drop 我今天就动手编写下。
首先，要实现的功能是，模块1拖放到模块2里并且每次拖放都会进行级数并显示出文本。
最终显示的效果如下：
下面直接贴代码吧！
<!DOCTYPE><html> ???<head> ???????<title></title> ???????<meta chartset="utf-8"> ???????<style type="text/css"> ???????body{ ???????????margin: 20px auto; ???????????padding: 20px; ???????} ???????#div1,#div2{ ???????????float: left; ???????} ???????.drap{ ???????????width:100px; ???????????height: 100px; ???????????border: 1px solid #aaaaaa; ???????????margin: 10px; ???????????text-align: center; ???????????line-height: 100px; ???????} ??????.drop{ ???????????width:380px; ????????????height: 380px; ????????????border: 1px solid #aaaaaa; ????????????margin: 10px; ???????????padding: 20px; ??????} ???????</style> ???????<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script> ???????<script type="text/javascript"> ???????$(function() { ???????????$("#div1")[0].ondragstart = function (event) { ???????????????console.log("dragStart"); ???????????????event.dataTransfer.setData("text", event.target.id); ???????????}; ???????????/* ???????????当放置被拖数据时，会发生 drop 事件。 ????????????调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开） ????????????*/ ???????????$("#div2")[0].ondrop = function (event) { ???????????????console.log("onDrop"); ???????????????var id = event.dataTransfer.getData("text"); ???????????????$(this).append($("#" + id).clone().text($(this).find("div").length)); ???????????????event.preventDefault(); ???????????}; ???????????/* ???????????ondragover 事件规定在何处放置被拖动的数据。 ????????????默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。 ???????????*/ ???????????$("#div2")[0].ondragover = function (event) { ???????????????console.log("dragOver"); ???????????????event.preventDefault(); ???????????}; ???????????$("#div2")[0].ondragenter = function (event) { ???????????????console.log("dragEnter"); ???????????}; ???????????$("#div2")[0].ondragleaver = function (event) { ???????????????console.log("dragLeave"); ???????????}; ???????????$("#div2")[0].ondragend = function (event) { ???????????????console.log("dragEnd"); ???????????}; ???????}); ???????</script> ???</head> ???<body> ???????<div id="div1" class="drap" draggable="true"></div> ???????<div id="div2" class="drop"></div> ???</body></html>最后检查无误后见代码提交到githup上https://github.com/xiaomion/HTML5，命令如下：
html5实践篇之drap and drop
原文地址：http://www.cnblogs.com/swan1014/p/7500872.html