今天做项目时,需要实现一个拖拽排序的功能,遂想到了html5的拖拽,便开始查资料,写代码.功夫不复有心人,通过网上资料作参考,排序功能成功实现.谷歌浏览器测试,拖拽平滑,无问题.火狐浏览器测试时,却无法拖拽,只能触发dragstart事件,其它事件却无法触发,这让我很摸不到头脑.查了查资料,并没有找到问题所在.后来经过自己不断的测试,发现火狐浏览器中,dragstart事件触发时,必须设置拖拽数据. 火狐浏览器中,可以正常拖拽了,但一切到这里并有完.火狐中拖拽,每次dragend的时候,都会弹出…
今天碰到一个让我一开始觉得莫名其妙的问题, 用window.showModalDialog打开一个.aspx文件,然后点击这个页面上一个button, 把页面的数据存入数据库之后,居然又打开一个这个页面 在google上搜索了不小一会之后,终于找到了原因了. 点击页面上button,会产生一个postback事件,等服务器处理完之后把更新的数据发送到客户端完成页面的刷新.但是由于页面是以modaldialog的方式打开的,不能被刷新,所以就会以window.open的方式打开一个新的页面. 解决…
思路:监听拖拽区域的 drop 事件,阻止浏览器上的默认拖拽事件 参考:http://www.helloweba.com/view-blog-192.html 例子: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <i…
拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需要实现Html5拖拽复制的功能,Html5拖拽复制很简单,只需要在普通Html5拖拽的过程中做一点小小的改动即可. ps: 本篇博文为非首页文章,只是简单的笔记. 浏览器支持 Internet Explorer 9 Firefox Opera 12 Chrome Safari 5 v1.0代码部分…
有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其这个对象到底包含了哪些玩意. FQ出去问了下谷歌找到了DataTransfer的API,下面就介绍一下: DataTransfer 拖拽数据传递对象,一般使用方式event.dataTransfer. dataTransfer . dropEffect [ = value ] 拖拽效果,可选值:“n…
html5拖拽一 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jquery.js"></script> <script> $(function () { var img =$("#img…
Internet Explorer 9FirefoxOpera 12ChromeSafari 5 v1.0代码部分 <!DOCTYPE html><html><head><styletype="text/css">#div1 {width: 700px;height: 120px;padding: 10px;border: 1px solid #aaaaaa;}#drag1 {cursor:pointer;}</style>&…
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-html5拖拽</title> <style> #drop{ width:300px; height:200px; background-…
记录一个关于弹出新页面始终在正中央方法 function openwindow(url, name, iWidth, iHeight) { var url;                                //转向网页的地址; var name;                          //网页名称,可为空; var iWidth;                         //弹出窗体的宽度; var iHeight;                       …
<!DOCTYPE html"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无标题页</title> <style type="text/css"> * { margin: 0; padding: 0; } .content { margin: 50px auto; width: 600px; border: 1…