火狐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> ...
随机推荐
- Java 实现 Domino邮箱自动注册
一.前提条件 Domino服务器需开通DIIOP服务 二.需要导入Java包 import lotus.domino.*; 三.实现Java代码 public void cerateID(MailPe ...
- 电脑重装系统按什么键进U盘PE
电脑重装系统按什么键进U盘PE... -------------------------- 各品牌电脑重装系统快捷按键进U盘PE: -------------------------- Dell电脑重 ...
- pwnable.kr brainfuck之write up
I made a simple brain-fuck language emulation program written in C. The [ ] commands are not impleme ...
- 常用px,pt,em换算及区别
pt (point,磅):是一个物理长度单位,指的是72分之一英寸. px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(D ...
- windows 10 安装tensorflow
人工智能一浪接一浪,随着谷歌公布tensorflow源码,尤其是支持windows 10平台的python3.5以上版本,更是让更多人都想用windows操作tensorflow. 第一次安装,也不知 ...
- java创建目录与文件
java创建目录与文件: package com.led.file; import java.io.File; import java.io.IOException; public class Fil ...
- Android Studio的Terminal配置
1.首先检查你的setting设置如下图 2.如果是已经ok的,请在你的Android sdk的文件夹目录下找到adb.exe,并配置环境变量 3.重启as,在terminal内输入 -adb hel ...
- Tornado框架简介
-------------------简介------------------- 1.概念: Tornado全称Tornado Web Server,是一个用Python语言写成的Web服务器 ...
- element-ui更换主题色
1.cd到你的项目文件目录下,npm i element-theme -g 2.npm i element-theme-default -D 3.et -i 执行后当前目录会有一个 element-v ...
- 使用Sidecar将Node.js引入Spring Cloud
网上看到的一篇文章,觉得写得挺好,现转载于此,以方便需要的网友查阅. 该文章介绍了非JAVA语言提供的应用集成到Spring Cloud的这样一个实现,以便我们使用其他语言作为参考. 感谢原作者分享, ...