- 浏览: 95428 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
kakamimika:
貌似不行吧
jquery读取xml文件示例 -
momofiona:
第二版本:http://dl.dropbox.com/u/ ...
popBaseball拖动插件分析
js中call,apply,setCapture,releaseCapture的使用
setCapture和releaseCapture的小应用
web开发和windows开发最大的区别就是windows开发是有状态的,而web开发是无状态的,在windows中,一切操作都可以由程序来控制 ,除非强制执行ctrl+alt+del;但web操作就不一样了,即使执行很重要的操作,用户一点击浏览器关闭按钮,就将前面操作成果化为乌有.尽管可 以在onunload事件中加些代码,让用户可以选择是否退出,但不能从根本上解决问题!
前几天,从网上看到setCapture方法,了解了一下,大体是这样的意思,当在IE文档某个区域中使用了这个方法,并且写了onclick或者 onmouse***等有关的鼠标事件方法,那么它就会监视相应的鼠标操作,即使你的鼠标移出了IE,它也一样能捕获到.如果你在某div中的 onclick事件中写了一个alert命令,这时,你点击的关闭按钮,它也一样会弹出alert窗口.releaseCapture与 setCapture方法相反,释放鼠标监控.
利用这个特性,我们可以延缓IE的关闭窗口等破坏性操作,将一些重要的操作能够在破坏性操作执行之前得到处理.
有一点遗憾:setCapture和releaseCapture 不支持键盘事件.只对onmousedown, onmouseup, onmousemove, onclick, ondblclick, onmouseover, onmouseout这样的鼠标事件起作用.
下面是一个小例子,若我们要对divMain这个div元素里面的内容进行保护:
1). 对divMain执行setCapture方法:
document.getElementById("divMain").setCapture();
2).加入一按钮btnChange,可以进行setCapture和releaseCapture切换,定义一全局变量;
var isFreeze = true;
3).在btnChange的onclick事件中,加入下列代码:
jquery拖动插件实例源代码;
传加一些调试信息,协助理解
Object originalEvent=Event mousedown type=mousedown
[h2]
h2:eq(0)
Object originalEvent=Event mousedown type=mousedown
[h2]
h2:eq(0)
Object originalEvent=Event mousedown type=mousedown
[h2]
dt:eq(0)
第二版本:http://dl.dropbox.com/u/335315/popeye/popBaseball2/index.html
作者BLOG:
http://user.qzone.qq.com/125058687/blog/1263959350
可恶的Qzone 访问不了,鄙视之
setCapture函数的作用就是将后续的mouse事件都发送给这个对象,releaseCapture就是将鼠标事件还回去,由 document、window、object之类的自行来处理,这样就保证了在拖动的过程中,不会由于经过了其它的元素而受到干扰。另外,还有一个很重 要的事情是,在Win32上,mouse move的事件不是一个连续的,也就是说,并不是我们每次移动1px的鼠标指针,就会发生一个mousemove,windows会周期性检查mouse 的位置变化来产生mousemove的事件。所以,如果是一个很小的页面对象,比如一个直径5px的圆点,如果没有setCapture和 releaseCapture,那么在鼠标按住之后,快速的移动鼠标,就有可能鼠标移动走了,但是小圆点还在原地,就是因为下一次的mousemove事 件已经不再发给这个圆点对象了。
setCapture和releaseCapture的小应用
web开发和windows开发最大的区别就是windows开发是有状态的,而web开发是无状态的,在windows中,一切操作都可以由程序来控制 ,除非强制执行ctrl+alt+del;但web操作就不一样了,即使执行很重要的操作,用户一点击浏览器关闭按钮,就将前面操作成果化为乌有.尽管可 以在onunload事件中加些代码,让用户可以选择是否退出,但不能从根本上解决问题!
前几天,从网上看到setCapture方法,了解了一下,大体是这样的意思,当在IE文档某个区域中使用了这个方法,并且写了onclick或者 onmouse***等有关的鼠标事件方法,那么它就会监视相应的鼠标操作,即使你的鼠标移出了IE,它也一样能捕获到.如果你在某div中的 onclick事件中写了一个alert命令,这时,你点击的关闭按钮,它也一样会弹出alert窗口.releaseCapture与 setCapture方法相反,释放鼠标监控.
利用这个特性,我们可以延缓IE的关闭窗口等破坏性操作,将一些重要的操作能够在破坏性操作执行之前得到处理.
有一点遗憾:setCapture和releaseCapture 不支持键盘事件.只对onmousedown, onmouseup, onmousemove, onclick, ondblclick, onmouseover, onmouseout这样的鼠标事件起作用.
下面是一个小例子,若我们要对divMain这个div元素里面的内容进行保护:
1). 对divMain执行setCapture方法:
document.getElementById("divMain").setCapture();
2).加入一按钮btnChange,可以进行setCapture和releaseCapture切换,定义一全局变量;
var isFreeze = true;
3).在btnChange的onclick事件中,加入下列代码:
完整代码如下: <HTML> <head> <title>setCapture和releaseCapture的小应用</title> <SCRIPT LANGUAGE="JavaScript"> <!-- var isFreeze = true; function click_func() { if(event.srcElement.id == "divMain") { alert("处理中..."); //常规操作 document.getElementById("divMain").setCapture(); } else { if(isFreeze && event.srcElement.id != "btnChange") { alert('未执行releaseCapture,不能点击'); document.getElementById("divMain").setCapture(); } } } function keydown_func() { if (event.keyCode==115 && event.altKey) //ALT+F4 { if(isFreeze) { alert('保存!'); //可以执行重要操作 } //window.showModelessDialog("about:blank","","dialogWidth:1px;dialogheight:1px"); //return false; } document.getElementById("divMain").setCapture(); } function change_capture(obj) { isFreeze = !isFreeze; if(isFreeze) { obj.value = "releaseCapture"; document.getElementById("divMain").setCapture(); } else { obj.value = "setCapture"; alert('保存!'); //可以执行重要操作 document.getElementById("divMain").releaseCapture(); } } //--> </SCRIPT> </head> <BODY onkeydown="keydown_func();"> <div id="divMain" style="width:500px;height:400px;border:1px solid #999;padding:2px" onclick="click_func();"> 点一下IE的菜单或者按钮看看:) 又或者IE窗口外的地方 <input type="button" value="releaseCapture" onclick="change_capture(this);" id="btnChange"> <script language="javascript"> document.getElementById("divMain").setCapture(); </script> </div> </BODY> </HTML> 注意:该实例仅能应用于IE
jquery拖动插件实例源代码;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>popDraggable</title> </head> <script type="text/javascript" src="jquery-1.3.2.min.js"> </script> <script type="text/javascript"> (function($){ $.fn.draggable = function(s){ if (this.size() > 1) return this.each(function(i, o){ $(o).draggable(s) //s为0对象的子标签 }); //包装集里的每个要拖动的对象; //h为包装集里要拖动的元素; var t = this, h = s ? t.find(s) : t, m = {}, to = false, d = function(v){ //禁止冒泡 v.stopPropagation(); //选项散列对象 //提供一些老的位置信息 console.log(s); console.log(v); m = { ex: v.clientX, ey: v.clientY, x: t.css("position") == "relative" ? parseInt(t.css("left")) : t.position().left, y: t.css("position") == "relative" ? parseInt(t.css("top")) : t.position().top, fw: t.get(0).style.width, w: t.width() }; //如果为位置为静态的那么,还是原来的位置,不做处理 if (t.css("position") == "static") to = { "left": m.x, "top": m.y }; console.log(h); //拖动的里头的子元素 //开始拖动 $(document).mousemove(b).mouseup(e); if (document.body.setCapture) document.body.setCapture(); //debug(m) }, //计算移动的后的位置; //新的鼠标坐标-老的鼠标坐标+老的元素所在文档的位置哦。 b = function(v){ t.css({ "left": v.clientX - m.ex + m.x, "top": v.clientY - m.ey + m.y }); }, //鼠标松开的时候 e = function(v){ if (document.body.releaseCapture) document.body.releaseCapture(); $(document).unbind("mousemove").unbind("mouseup"); }; //开始拖动啦 h.mousedown(d); return t; //返回结果包装集; }; })(jQuery); $(document).ready(function(){ $(".draggable").draggable("dt:eq(0)") $("#left").draggable() $("#reletive").draggable() $("img").draggable() $("#test2").draggable("dt:eq(0)"); $("#test3").draggable("h2:eq(0)"); }) function debug(m){ document.title = "ex=" + m.ex + " ey=" + m.ey + " x=" + m.x + " y=" + m.y + " fw=" + m.fw + " w=" + m.w; } </script> <style type="text/css"> * { margin: 0; padding: 0; cursor: default } body { font-size: 11px; font-family: Verdana, Geneva, sans-serif; width: 100%; overflow-x: hidden } #wrap { position: relative; left: 100px; top: 100px; width: 1000px } #left { width: 200px; height: 200px; margin-right: 10px; float: left; background: #003; } #center { width: 300px; margin-right: 10px; float: left; } #right { width: 400px; margin-right: 10px; float: left; } #reletive { position: relative; left: 50px; top: 100px; width: 100px; height: 100px; background: #FC0 } .absolute { position: absolute; width: 200px } .draggable { border: solid 1px #eee; margin: 5px; } .draggable dt { padding: 0 5px; font-size: 13px; color: #666; background: #69C; color: #FFF; height: 25px; line-height: 25px; cursor: move } .draggable dt span { float: left; cursor: move } .draggable dd { padding: 5px; } #test2 { position: absolute; width: 200px; border: 1px solid #ccc; font-size: 12px; line-height: 150% } #test2 dt { height: 24px; background: green; cursor: move; } #test2 dd { padding: 10px; } #test3{border:1px solid #333; width:400px; position:relative;} #test3 h2{ background:blue} #test3 p{padding:20px} </style> <body> <img src="popeye.jpg" style="position:absolute; z-index:125058687; cursor:move"/> <div id="wrap"> <div id="center"> <div id="reletive"> </div> </div> <div id="right"> <dl class="draggable absolute"> <dt> <span>popDraggable</span> </dt> <dd> drag & drop plugin </dd> </dl> </div> </div> <dl id="test2"> <dt> 我的标题 </dt> <dd> fasfdsdfs </dd> </dl> <div id="test3"> <h2>我是测试2</h2> <p>faks;lfjads;fj fja;sdfj; fj ;fjsa;fjds</p> </div> </body> </html>
传加一些调试信息,协助理解
Object originalEvent=Event mousedown type=mousedown
[h2]
h2:eq(0)
Object originalEvent=Event mousedown type=mousedown
[h2]
h2:eq(0)
Object originalEvent=Event mousedown type=mousedown
[h2]
dt:eq(0)
评论
1 楼
momofiona
2010-02-08
第二版本:http://dl.dropbox.com/u/335315/popeye/popBaseball2/index.html
作者BLOG:
http://user.qzone.qq.com/125058687/blog/1263959350
可恶的Qzone 访问不了,鄙视之
相关推荐
popBaseball jQuery 拖拽插件 无cookie
一款非常好用的拖拽插件一款非常好用的拖拽插件一款非常好用的拖拽插件
一款功能非常强大,基于draggabilly.pkgd.js制作的多种拖动效果的jQuery拖动拖拽插件draggabilly.pkgd.js。
jquery.easyDrag.js史上最强大的拖拽插件
JQ JS javascript layui UI组件 元素 div 拖动插件JQ JS javascript layui UI组件 元素 div 拖动插件
自己写的拖拽插件,有兴趣的同学可以看一看
拖拽布局插件 拖拽 布局 手机拖拽
兼容各个浏览器,jquery 拖拽插件,轻松实现表格拖拽,排序等。。
jQuery拖拽插件制作拖拽排序特效
基于jquery,利用canvas自带的api,实现了一个鼠标点击对应点后,可拖动的一个插件
jQuery拖拽插件制作拖拽排序特效是一款非常实用的鼠标拖拽布局插件。
如果你知道超级拖拽是什么,那么你可能需要这款IE9插件。 虽然IE9本身自动的“加速器”功能可以实现很多方便的操作,但是很多用户好像还是更加倾向于使用拖拽插件。 这款插件是国内一位高人用C#语言编写的,作者...
jQuery拖拽插件drag.js
draggabilly一款功能强大的拖动拖拽元素插件
一个使用简单方便的div弹出窗口拖拽插件,纯javascript
这个jquery拖拽插件实现起来非常容易 有相应的demo
拖拽插件、drag 拖拽插件、drag 拖拽插件、drag 拖拽插件、drag
imageQ图片缩放拖拽jQuery小插件 综合网上的一些代码及资源而成
jQuery拖拽插件draggable,不依赖于jQuery UI,可以自行制定拖拽区域
很好用的拖拽插件 官网: dragsort.codeplex.com 引入jquery包 然后导入diagsort包 [removed][removed] 使用 $("ul").dragsort() 默认拖拽的标签的li 可以通过修改dragSelector参数实现拖拽其他标签 例如拖拽tr...