l元素可以用于拖拽必须设置draggable="true"属性，img和a标签除外，她们两个默认就可以被拖拽
想做拖拽处理，就需要在Dom元素上监听拖放的事件：dragstart,drag,dragenter,dragover,dragleve,drop,dragend
在文档中，默认document最先触发以上事件，而默认的处理是阻止页面元素的变化，想人为的控制拖拽的元素的变化需要我们改动代码。所有必需去掉document的默认处理
document.ondragover = function(e) {
e.preventDefault();
};
document.ondrop = function (e) {
e.preventDefault();
};
拖拽事件event中属性：dataTransfer是传递数据的关键。使用dataTransfer的setData（“Text",data）方法，把要拖拽的数据放到dataTransfer中，在拖拽完毕的事件中，再从中取出数据，用方法：getData("text/plain");
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> #d1, #d2 { width:200px; height:200px; border:1px solid gray; float:left; margin-right:20px; } </style> <script> function drag(e) { e.dataTransfer.setData("Text", e.target.id); } function dragover(e) { e.preventDefault(); } function move1(e) { e.preventDefault(); var id = e.dataTransfer.getData("Text"); e.target.appendChild(document.getElementById(id)); } </script> </head> <body> <div id="d1" ondragover="dragover(event)" ondrop="move1(event)"> <img id="i1" src="ts.gif" draggable="true" ondragstart="drag(event)" /><br /> <a id="Img1" draggable="true" ondragstart="drag(event)">把我也拖走吧！</a> </div> <div id="d2" ondragover="dragover(event)" ondrop="move1(event)"></div> </body> </html>