搞懂html5新增的拖放API（分析火狐和其它浏览器的不同）

  1.为什么ondrop事件不被调用

当我们直接写document.ondrop=function(e){alert("test")};这个test是不会被弹出的，因为html元素默认是阻止放的操作的，自然这个事件也不会被激发，所以想让这个事件被调用，必须加上这个，document.ondragover=function(e){  return false;  }  ondrop这个事件才会被调用

2. 火狐与其它浏览器的不同

如果你只是想看到拖放的效果，在其它浏览器你只需要在html元素上加上draggable=true即可 ，但是火狐有这句话，你也看不到效果，因为火狐要求被拖动元素必须包含数据，所以你需要给他加上数据，方法 xx.ondragstart=function(e){ e.dataTransfer.setData("text","www.baidu.com"); }  当然这个setdata方法你可以随便写。

  但是这里有一点非常头疼，就是火狐会默认把你的携带数据在一个新的页面打开，上面这个例子就会打开百度在新页面。如何阻止他打开新页面呢。

方法： document.ondragover=function(e){  return false;  }  

             document.ondrop=function(e){  return false;  } 以上代码无效，还是会打开新的页面

方法： document.ondragover=function(e){  return false;  }       

             document.ondrop=function(e){  

     e.stopPropagation();

}   以上代码也无效，不同在于火狐在当前页面打开了百度。

方法：

document.ondragover = function (e) {    e.stopPropagation();}document.ondrop = function (e) {    e.stopPropagation();}以上代码才是真正有效的，阻止百度的打开。