Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

dragover在Firefox上不触发的问题

  昨天文章中的实例在Chrome上可以正常执行,但到了目前最新版的Firefox上就不行了。因为Firefox认为拖动的对象必须存在数据才能够拖动,而默认的DOM元素是没有数据的,因此无法拖动。要解决这个问题,我们需要在dragstart事件中为其设置数据。
  首先是问题重现:
<style>
div {border:1px solid red;padding:20px;float:left;cursor:move;}
</style>
<div id="a" draggable="true"></div>
<script>
document.ondragover=function(e){
  console.log("Firefox上此处不会执行,Chrome正常");
  e.preventDefault();
};
a.ondragstart=function(e){
  console.log("start");
};
</script>
  解决版本: <style>
div {border:1px solid red;padding:20px;float:left;cursor:move;}
</style>
<div id="a" draggable="true"></div>
<script>
document.ondragover=function(e){
  console.log("Firefox、Chrome 皆正常");
  e.preventDefault();
};
a.ondragstart=function(e){
  //设置数据
  e.dataTransfer.setData("数据的MIME(非空字符串)","数据");
  console.log("start");
};
</script>
  这里的setData方法并不一定要设置什么数据,只要有设置即可(可以设置为null)。但需要注意MIME部分不能为空字符串,否则将被视为没设置数据。

  测试于:
    Chrome 33 @ Windows 7
    Firefox 27 @ Windows 7
网名:
54.146.214.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^