关于html5拖拽中的一些坑

难受，上头交代做的页面里有个拖拽的功能，网上其实有许多好用的拖拽插件，但是本着不拿嗟来之食，毅然决然的选择使用原生的js拖拽API，然后被坑惨了。。。。

1.首先是从body下拖拽到iframe中的

    ☆需要注意，当使用a标签的target属性进行iframe切换时，iframe标签的src属性是不会变化的

<a href="1.html" target="iframe">iframe1</a>
<iframe id="iframe" name="iframe" src="shouye.html"></iframe>

    ☆无法再body下动态获取到iframe内的元素（比如说在a.frame跳转到b.iframe时  你是无法获取到b.iframe下的元素内容 的，因为iframe只是局部刷新，你的跳转按钮所在的页面是不会变化的，也就是说你获取的是null，是前一个默认的第一的iframe的内容）当然，你可以动态监听iframe的加载来解决这个问题

 2.关于拖拽的坑

    ☆当你拖拽的元素内部有图片或者本身就是个图片时，你要小心了，浏览器默认拖拽图片时在新页面中打开图片，解决办法我也找过，说的头头是道，实际上没个什么卵用。至于我的解决办法只能说是给大家个借鉴：拖拽元素添加伪类，覆盖掉父元素，然后隐藏，就这么简单，但是治标不治本。（我是这么解决的，因为实在找不到合适的办法，网上说单独给图片添加dragstart，然后阻止默认行为，拜托，加了之后根本拖都拖不动了好吧！！！）

.a{position:relative;}
.a:after{content:'';position:absolute;width:100%;height:100%;visiable:hidden;}

    ☆当你对目标元素直接使用drop事件而忽略了其他事件的时候，你会发现你的drop事件根本无法触发。解决办法也很简单，只需要给目标元素添加上dropover事件，然后阻止默认行为（意思是里面必须有代码）；这个时候就可以触发drop事件了

   

elem.ondrop=function(e){
   console.log("drop");//没任何反应
}
//单独一个drop事件是无法触发的；应该改为下面这样
elem.ondropover=function(e){
   e.preventDefault();
}
elem.ondrop=function(e){
   console.log("drop");此时会输出
}

 

最后记录一下在拖拽中传递数据：开始元素:e.dataTransfer.setData("Text",e.target.id); 目标元素:e.dataTransfer.getData("Text")

 

 

over

 

补充一点：在拖拽中如果只是单纯的阻止默认事件，在火狐浏览器中是会打开新页面的，此时需要添加阻止事件冒泡，就能解决