难受，上头交代作的页面里有个拖拽的功能，网上其实有许多好用的拖拽插件，可是本着不拿嗟来之食，毅然决然的选择使用原生的js拖拽API，而后被坑惨了。。。。javascript
1.首先是从body下拖拽到iframe中的css
☆须要注意，当使用a标签的target属性进行iframe切换时，iframe标签的src属性是不会变化的html
<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的加载来解决这个问题java
2.关于拖拽的坑浏览器
☆当你拖拽的元素内部有图片或者自己就是个图片时，你要当心了，浏览器默认拖拽图片时在新页面中打开图片，解决办法我也找过，说的头头是道，实际上没个什么卵用。至于个人解决办法只能说是给你们个借鉴：拖拽元素添加伪类，覆盖掉父元素，而后隐藏，就这么简单，可是治标不治本。（我是这么解决的，由于实在找不到合适的办法，网上说单独给图片添加dragstart，而后阻止默认行为，拜托，加了以后根本拖都拖不动了好吧！！！）插件
.a{position:relative;}
.a:after{content:'';position:absolute;width:100%;height:100%;visiable:hidden;}
☆当你对目标元素直接使用drop事件而忽略了其余事件的时候，你会发现你的drop事件根本没法触发。解决办法也很简单，只须要给目标元素添加上dropover事件，而后阻止默认行为（意思是里面必须有代码）；这个时候就能够触发drop事件了code
elem.οndrοp=function(e){
console.log("drop");//没任何反应
}
//单独一个drop事件是没法触发的；应该改成下面这样
elem.ondropover=function(e){
e.preventDefault();
}
elem.οndrοp=function(e){
console.log("drop");此时会输出
}
最后记录一下在拖拽中传递数据：开始元素:e.dataTransfer.setData("Text",e.target.id); 目标元素:e.dataTransfer.getData("Text")htm
over事件
补充一点：在拖拽中若是只是单纯的阻止默认事件，在火狐浏览器中是会打开新页面的，此时须要添加阻止事件冒泡，就能解决图片