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

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


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



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


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

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


方法: document.οndragοver=function(e){  return false;  }  

             document.οndrοp=function(e){  return false;  } 以上代码无效ÿ

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值