今天做项目时,需要实现一个拖拽排序的功能,遂想到了html5的拖拽,便开始查资料,写代码。功夫不复有心人,通过网上资料作参考,排序功能成功实现。谷歌浏览器测试,拖拽平滑,无问题。火狐浏览器测试时,却无法拖拽,只能触发dragstart事件,其它事件却无法触发,这让我很摸不到头脑。查了查资料,并没有找到问题所在。后来经过自己不断的测试,发现火狐浏览器中,dragstart事件触发时,必须设置拖拽数据。

火狐浏览器中,可以正常拖拽了,但一切到这里并有完。火狐中拖拽,每次dragend的时候,都会弹出一个新页面。其实,这个问题本身并没有太大影响,但是每次拖拽结束,总弹出一个新页面,总感觉不是特别好。网上搜了下资料,了解到,通过给body绑定drop事件,并阻止冒牌和默认事件,便可以解决此问题。代码截图如下:

注:stopPropagation() 和 preventDefault()两个方法必须都写,单写一个是解决不了问题的。

火狐html5拖拽 弹出新页面解决办法的更多相关文章

  1. Asp.net页面使用showModalDialog时Postback弹出新页面解决办法

    今天碰到一个让我一开始觉得莫名其妙的问题, 用window.showModalDialog打开一个.aspx文件,然后点击这个页面上一个button, 把页面的数据存入数据库之后,居然又打开一个这个页 ...

  2. html5 拖拽文件到页面实现上传

    思路:监听拖拽区域的 drop 事件,阻止浏览器上的默认拖拽事件 参考:http://www.helloweba.com/view-blog-192.html 例子: <!DOCTYPE htm ...

  3. Html5拖拽复制

    拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...

  4. HTML5拖拽功能中 dataTransfer对象详解

    有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...

  5. html5拖拽

    html5拖拽一 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  6. HTML5 拖拽复制功能的实现方法

    Internet Explorer 9FirefoxOpera 12ChromeSafari 5 v1.0代码部分 <!DOCTYPE html><html><head& ...

  7. 每天一个JavaScript实例-html5拖拽

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. javascript 关于弹出新页面始终在正中央方法

    记录一个关于弹出新页面始终在正中央方法 function openwindow(url, name, iWidth, iHeight) { var url;                       ...

  9. html5(拖拽3)

    <!DOCTYPE html"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...

随机推荐

  1. 学习笔记TF041:分布式并行

    TensorFlow分布式并行基于gRPC通信框架,一个master负责创建Session,多个worker负责执行计算图任务. 先创建TensorFlow Cluster对象,包含一组task(每个 ...

  2. asp.net 开发 sql server 转 oracle

    前段时间我们公司项目 要把sql server 转oracle 分享一下心得 也记录一下问题 开始我研究了一段时间 然后下载了 oracle 11g 版本 和 PL/SQL(客户端) 和sql ser ...

  3. JavaScript 加号运算符详解

    将介绍JavaScript中 '+'加号运算符在一元.二元运算时的表现. 目录 1.一元运算符 2. 二元运算符 1. 一元运算符 语法: + Expression 说明:'+'号运算符作为一元运算符 ...

  4. What is the difference for delete/truncate/drop

    Same: delete/truncate/drop, all of them can support rollback/commit, the sample is as below: begin t ...

  5. fetch默认不携带cookie

    最近在使用fetch向服务器发送请求,过程中的体会和遇到的问题在这里记录一下. fetch返回的是一个Promise对象,我们可以对返回的结果做进一步的处理,这是与传统ajax的一个区别. 简单的请求 ...

  6. logify与theos的二三事

    最近逆向一个软件,无奈类名.方法名混淆的太厉害,class-dump后,很难猜出大致是哪个方法在起作用.用reveal 和 cycript 找到了viewcontrol 类,但类方法太多,还是不能确定 ...

  7. Linux 修改用户名

    0.使用root用户登录进行操作 1.删除用户相关进程 ps -ef | grep zheng236 2. 修改用户登录名 usermod zheng236 -l zheng 3.修改用户家目录 mv ...

  8. Vim入门学习之Vim解析

    Vim解析... ----------------------- 首先你要会从官网上下载你想要的Vim版本:   官网: http://www.vim.org/==================== ...

  9. SSM三大框架整合详细教程(Spring+SpringMVC+MyBatis

    原博主链接:( http://blog.csdn.net/zhshulin ) 使用 SSM ( Spring . SpringMVC 和 Mybatis )已经有三个多月了,项目在技术上已经没有什么 ...

  10. try...catch...finally语句块

    try-catch-finally语句主要是用来处理检查异常,捕获并处理,以及最后必须要执行的finally块. try-catch-finally语句入门: 1.try-catch-finally语 ...