先来个代码——————
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 </head>
6 <body onloat="init()";>
7 <div id="word" draggable="true" style="width:100px; height: 30px; border: 1px solid #ccc;">drag me </div>
8 <br>
9 <div id="box" style="width: 100px; height: 100px; border: 1px solid #333"></div>
10 <script type="text/javascript">
11 function init() {
12 var source = document.getElementById("word");
13 var dest = docuemnt.getElementById("box");
14
15 source.addEventListener("dragstart", function(ev) {
16 var dt = ev.dataTransfer;
17 dt.effectAllowed = ‘all‘;
18 dt.setData("text/plain", "成功拖入");
19 },false);
20 dest.addEventListener("dragend", fucntion(ev) {
21 ev.preventDefault();
22 },false);
23 dest.addEventListener("drop", function(ev) {
24 var dt = ev.dataTransfer;
25 var text = dt.getData("text/palin");
26 dest.textContent += text;
27 ev.preventDefault();
28 ev.stopPropagation();
29 },false);
30 document.ondragover = function(e) {e.preventDefault():};
31 document.ondrop = function(e) {e.preventDefault();};
32 }
33 </script>
34 </body>
35 </html>
dataTransfer（对拖拽对象的数据操作）
var data=ev.dataTransfer;
data.effectAllowed ="all"; 拖动效果 none ，link ，copy... ...
data.setData("text/plain","文本"); 设置数据 参数：MIME类型，内容
事件
dragstart 开始拖放 加在可拖放元素上
drag 拖放中... 加在可拖放元素上
dragenter 进入目标容器范围内
dragover 在目标容器内移动
dragleave 离开目标容器范围内
drop 拖放到目标元素中，完成 加在目标容器上
dragend 操作结束 加在目标容器上
对于被拖动的元素来说，只需要监听一个”dragstart“事件并且通过
这一代码块来对拖入后在“box“要显示的内容。
对于“box”来说，需要监听“dragend”、“drop”两个事件，其中在dragend事件中，必须阻止默认行为，否则会拒绝拖放。 drop事件需要获取信息切阻止默认行为。