jquery浮动层拖动插件
具体使用方法参考代码里面的注释
$.cancelEvent = function (e) {//阻止事件冒泡 if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; if (e.preventDefault) e.preventDefault(); else e.returnValue = false; }; $.Drag = function () {//jquery层拖动插件 var btn = document.all ? 1 : 0//判断鼠标哪个按键点击的,IE和W3c浏览器的button值不一样,只有左键按下拖动才有效 , a, o, pos; function dragStart(e) {//移动对象鼠标按下事件 if (e.button != btn) return;//按下鼠标左键 if (o) $(document).unbind({ mousemove: dragMove, mouseup: dragEnd }); o = $(this.parent || this);//获取拖动的整体 if (btn == 1) o.get(0).setCapture(); //设置IE的鼠标捕获 //设置浮动层的初始位置数据 pos = { ox: (e.pageX || (e.clientX + $(document).scrollLeft())) - parseInt(o.css('left')), oy: (e.pageY || (e.clientY + $(document).scrollTop())) - parseInt(o.css('top')) }; $(document).bind({ mousemove: dragMove, mouseup: dragEnd }); //绑定页面的鼠标移动和鼠标弹起事件 $.cancelEvent(e); } function dragMove(e) {//页面鼠标移动事件 //设置层的位置 o.css({ top: (e.pageY || (e.clientY + $(document).scrollTop())) - parseInt(pos.oy), left: (e.pageX || (e.clientX + $(document).scrollLeft())) - parseInt(pos.ox) }); $.cancelEvent(e); } function dragEnd(e) {//页面鼠标弹起事件 if (e.button != btn) return; $(document).unbind({ mousemove: dragMove, mouseup: dragEnd }); if (btn == 1) o.get(0).releaseCapture(); //释放IE的鼠标捕获 o = null; $.cancelEvent(e); if ($.Drag.Resize) $.Drag.Resize(); //层移动结束后要执行的事件,如果设置了此事件。增加此代码主要是为了针对“jquery+flash显示图片实时加载进度插件”插件而设置的,设置lightbox大小 } for (var i = 0, j = arguments.length; i < j; i++) {//绑定移动层鼠标按下事件 //arguments[i]参数解释:如果参数为数组['触发拖动的对象','要拖动的整体,参数“触发拖点的对象”包含在整体中'],或者不为数组时,这个对象就为拖动的整体 a = arguments[i]; if (!a.push) a = [a];//不为数组,则将参数转换为数组 o = $(typeof (a[0]) == 'string' ? '#' + a[0] : a[0]).get(0);//获取对象,如果传递ID怎需要进行转换 if (!o) continue;//对象不存在 if (a[1]) o.parent = $(typeof (a[1]) == 'string' ? '#' + a[1] : a[1]).get(0);//第一个对象不为拖动整体,则设置拖动对象的parent属性为拖动整体 $(o).mousedown(dragStart);//绑定拖动对象的鼠标按下事件 } a = null; };
加支付宝好友偷能量挖...
原创文章,转载请注明出处:jquery浮动层拖动插件