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