H5的拖放

先来个代码——————

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <body onloat="init()";>
 7   <div id="word" draggable="true" style="100px; height: 30px; border: 1px solid #ccc;">drag me </div>
 8 <br>
 9 <div id="box" style=" 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事件需要获取信息切阻止默认行为。