关于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.ο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")

 

 

over

 

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

发布了47 篇原创文章 · 获赞 41 · 访问量 6万+
展开阅读全文

html通过draggable如何实现将拖放后位置原有的内容删除?

05-17

模拟车在车库中换车位的过程,将车从一个车位拖到其余的空车位上,然后让空车位原有的图片消失,显示拖动的车的图片。目前只实现了一部分,如下:![图片说明](https://img-ask.csdn.net/upload/201905/17/1558070560_310016.gif) 代码如下: <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> <style> #tal1 td{ border: 1px solid black; } </style> <table width="300px" height="300px"> <tr> <td ondrop="drop(event)" ondragover="allowDrop(event)"><img draggable="true" ondragstart="drag(event)" id="im1" src="img/1.png"/></td> <td ondrop="drop(event)" ondragover="allowDrop(event)"><img draggable="true" ondragstart="drag(event)" id="im2" src="img/1.png"/></td> <td ondrop="drop(event)" ondragover="allowDrop(event)"><img id="im3" src="img/e.png"/></td> </tr> <tr> <td ondrop="drop(event)" ondragover="allowDrop(event)"><img draggable="true" ondragstart="drag(event)" id="im4" src="img/1.png"/></td> <td ondrop="drop(event)" ondragover="allowDrop(event)"><img id="im5" src="img/e.png"/></td> <td ondrop="drop(event)" ondragover="allowDrop(event)"><img id="im6" src="img/e.png"/></td> </tr> <tr> <td ondrop="drop(event)" ondragover="allowDrop(event)"><img id="im7" src="img/e.png"/></td> <td ondrop="drop(event)" ondragover="allowDrop(event)"><img id="im8" src="img/e.png"/></td> <td ondrop="drop(event)" ondragover="allowDrop(event)"><img id="im9" src="img/e.png"/></td> </tr> </table> 问答

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览