火狐html5拖拽 弹出新页面解决办法
今天做项目时,需要实现一个拖拽排序的功能,遂想到了html5的拖拽,便开始查资料,写代码。功夫不复有心人,通过网上资料作参考,排序功能成功实现。谷歌浏览器测试,拖拽平滑,无问题。火狐浏览器测试时,却无法拖拽,只能触发dragstart事件,其它事件却无法触发,这让我很摸不到头脑。查了查资料,并没有找到问题所在。后来经过自己不断的测试,发现火狐浏览器中,dragstart事件触发时,必须设置拖拽数据。
火狐浏览器中,可以正常拖拽了,但一切到这里并有完。火狐中拖拽,每次dragend的时候,都会弹出一个新页面。其实,这个问题本身并没有太大影响,但是每次拖拽结束,总弹出一个新页面,总感觉不是特别好。网上搜了下资料,了解到,通过给body绑定drop事件,并阻止冒牌和默认事件,便可以解决此问题。代码截图如下:

注:stopPropagation() 和 preventDefault()两个方法必须都写,单写一个是解决不了问题的。
火狐html5拖拽 弹出新页面解决办法的更多相关文章
- Asp.net页面使用showModalDialog时Postback弹出新页面解决办法
今天碰到一个让我一开始觉得莫名其妙的问题, 用window.showModalDialog打开一个.aspx文件,然后点击这个页面上一个button, 把页面的数据存入数据库之后,居然又打开一个这个页 ...
- html5 拖拽文件到页面实现上传
思路:监听拖拽区域的 drop 事件,阻止浏览器上的默认拖拽事件 参考:http://www.helloweba.com/view-blog-192.html 例子: <!DOCTYPE htm ...
- Html5拖拽复制
拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...
- HTML5拖拽功能中 dataTransfer对象详解
有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...
- html5拖拽
html5拖拽一 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- HTML5 拖拽复制功能的实现方法
Internet Explorer 9FirefoxOpera 12ChromeSafari 5 v1.0代码部分 <!DOCTYPE html><html><head& ...
- 每天一个JavaScript实例-html5拖拽
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- javascript 关于弹出新页面始终在正中央方法
记录一个关于弹出新页面始终在正中央方法 function openwindow(url, name, iWidth, iHeight) { var url; ...
- html5(拖拽3)
<!DOCTYPE html"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
随机推荐
- Fortran调用C语言小计
先简单记录下问题,以后再给续解决方案 1,关于fortran中module的使用 2,没有参数可以正常调用,当需要传递参数时,由于两者语言的差异,字符串结束符号不同,应该注意 3,关于调用C函数时,调 ...
- redux深入理解之中间件(middleware)
理解reduce函数 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. arr.reduce([callback, initi ...
- SQL-三级分类查询
/*SQLyog 企业版 - MySQL GUI v8.14 MySQL - 5.5.40 : Database - appinfodb******************************** ...
- Wincc flexable的按钮组态
1.题目 2.画面切换按钮组态 1)新建变量 2)组态画面进行命名 3)组态按钮常规 4)组态按钮属性 5)在事件中选择单击,系统函数中选择画面中的ActivateScreen函数切换画面 3.给变量 ...
- HDU 6170----Two strings(DP)
题目链接 Problem Description Giving two strings and you should judge if they are matched.The first strin ...
- tomcat 组件研究二--请求过程
上一篇博客大概总结了tomcat 的组件以及其组织方式,对于tomcat 的启动过程也进行进行了简单的总结,下面这篇博客,继续研究tomcat 处理请求的相关组件,其实就是主要研究Connectors ...
- 【Eclipse】代码格式化 快捷键无效
原因:搜狗输入法 简繁切换与eclipse代码格式化冲突 解决:在搜狗输入法-->按键-->修改即可.
- 用notepad如何在每行结尾处添加特殊字符
在处理关键词的时候,有时候需要将每一行的末尾添加某个特殊字符,较常用的一种方法就是用excel拼接起来.今天要分享是一种简单的方法,用notepad就可以很容易实现,主要用到notepad中的扩展匹配 ...
- 深入浅出数据结构C语言版(14)——散列表
我们知道,由于二叉树的特性(完美情况下每次比较可以排除一半数据),对其进行查找算是比较快的了,时间复杂度为O(logN).但是,是否存在支持时间复杂度为常数级别的查找的数据结构呢?答案是存在,那就是散 ...
- Python学习笔记3
__slots__ 如果我们想要限制class的属性怎么办?比如,只允许对Student实例添加name和age属性. 为了达到限制的目的,Python允许在定义class的时候,定义一个特殊的__s ...