今天做项目时,需要实现一个拖拽排序的功能,遂想到了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. 常用的Linux发行版

    Linux发行版百花齐放 [内容摘要] 如今,众多的Linux发行版百花齐放,linux的阵营日益壮大,每一款发行版都拥有一大批用户,开发者自愿为相关项目投入精力.Linux发行版可谓是形形色色,它们 ...

  2. 获取token之后,再调用匿名方法

    js获取token bpm.api.beginDownload = function (filePath, fileName) { var url = "/Home/GetToken&quo ...

  3. win7系统中如何使文件显示出扩展名或显示文件后缀名

    win7系统中如何使文件显示出扩展名-------------------- 1.点击计算机-->>点击组织,然后选择“文件夹及搜索选项”-->> -------------- ...

  4. TIKV副本一致性检查机制分析

    背景 TIKV使用raft协议来实现副本同步,任何时刻写入一个KEY-VAL键值对,都会基于RAFT协议复制到不同机器的三个副本上,raft协议本身能保证副本同步的强一致性,但是任何系统都可能存在BU ...

  5. .net 中常用的正则表达式整理

    相信很多伙伴都跟我一样有关于正则表达式的爱和恨,怎么说呢? 因为正则表达式规则繁多且复杂,想一个一个学 全部精通,需要耗费很长时间和精力, 但是我们用的地方并不是很多,所以我觉得这类东西需要做成类似工 ...

  6. Java基础---IO(二)--File类、Properties类、打印流、序列流(合并流)

    第一讲     File类 一.概述 1.File类:文件和目录路径名的抽象表现形式 2.特点: 1)用来将文件或文件夹封装成对象 2)方便于对文件与文件夹的属性信息进行操作 3)File类的实例是不 ...

  7. HTML脚本配置Android自动化测试

    说明   在项目配置完基于robotium框架下的自动化测试用例后发现虽然用代码配置测试用例虽然较为灵活,但是如果编写较为全面的测试用例则必然会消耗大量开人员的精力,并且对于用例的后期维护也是很大一部 ...

  8. kettle使用正则表达式动态获取excel表

  9. python3 安装及项目管理安装

    python3 一.下载安装 地址:https://www.python.org/downloads/ 安装:傻瓜式安装:我的目录如下 二.环境配置 [右键计算机]-->[属性]-->[高 ...

  10. 利用Google浏览器调试js代码

    1.js有两种引入方式,外链和内嵌: 内嵌在浏览中直接调试,外链要在断点处写debugger; 示例代码: <!DOCTYPE html> <html lang="en&q ...