今天做项目时,需要实现一个拖拽排序的功能,遂想到了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. js面试题知识点全解(一变量类型和计算)

    1.js中使用typeof能得到哪些类型 2.何时使用===和== 3.js中的内置函数 4.js变量按存储方式区分为哪些类型,并描述其特点 5.如何理解json 以下对这些问题的知识点做一些总结: ...

  2. noip普及组2004 花生采摘

    花生采摘 描述 鲁宾逊先生有一只宠物猴,名叫多多.这天,他们两个正沿着乡间小路散步,突然发现路的告示牌上贴着一张小小的纸条:"欢迎免费品尝我种的花生!--熊字". 鲁宾逊先生和多多 ...

  3. BYS推荐MS前端PhoneCall面试问题整理-2

    JS:1. 如何为一个已有的对象加一个新的方法,Prototype,这个不仅要知道,还要用过,写过 2. Angular和Ember比较的优势或不同点在哪里 3. null和undefined的区别, ...

  4. SQL中多条件查询括号的用途

    界面: 代码 0 posted @ 2009-12-15 13:28 唔愛吃蘋果 阅读(8640) 评论(0)  编辑 收藏

  5. Myeclipse和windows调节成护眼色

    作为程序员,对着电脑屏幕久了,眼睛难免疲劳,下面相信对我们每个 人都很有帮助. windows xp:桌面空白处右键,属性,外观-高级,然后在项目那栏选窗口,再点颜色-其它,然后把色调设为85(默认是 ...

  6. Linux安装MariaDB(Mysql)和简单配置

    1.安装MariaDB 安装命令 yum -y install mariadb mariadb-server 安装完成MariaDB,首先启动MariaDB systemctl start maria ...

  7. GC选择之CMS 并发标记清除

    CMS收集器 Concurrent Markup Sweep 并发标记清除 使用了标记-清除算法 与标记-压缩相比,并发阶段会降低吞吐量 算法作用在老年代以及永久区(新生代使用ParNew) -XX: ...

  8. C# 实例练习——字符串处理(第三天)

    1.  编写程序将IP地址分解后输出(将IP地址中的点(.)去掉,替换成空格符),如:132.123.4替换后为132  123   4. Console.WriteLine("请输入您电脑 ...

  9. 这可能是新手最容易入门的JVM讲解(不过是一场恋爱)

    作者:请叫我红领巾,转载请注明出处http://www.cnblogs.com/xxzhuang/p/7453746.html 一.写在前面 首先,本篇文章并没有涉及原理,而是在笔者撸了<深入理 ...

  10. Python学习笔记4

    根据文件类型选择文件 文件 s s.split('.')[1] 即为文件后缀名,据此判断 输出执行后结果到指定文件 os.system('E:\\Learning\\python\\test_case ...