H5的拖放

先来个代码——————

 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事件需要获取信息切阻止默认行为。

posted @ 2016-07-21 11:35  小牛刀  阅读(295)  评论(0编辑  收藏  举报