关于html5拖拽中的一些坑

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq8241994/article/details/80513865

难受,上头交代做的页面里有个拖拽的功能,网上其实有许多好用的拖拽插件,但是本着不拿嗟来之食,毅然决然的选择使用原生的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")

扫描二维码关注公众号,回复: 5618556 查看本文章

over

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

猜你喜欢

转载自blog.csdn.net/qq8241994/article/details/80513865