如何让 FancyBox 支持窗口拖动呢?

红薯 发布于 2011/01/23 10:50
阅读 2K+
收藏 1

【开源中国 APP 全新上线】“动弹” 回归、集成大模型对话、畅读技术报告”

oschina 的空间改版已经确定了使用 FancyBox 来作为弹窗的JS库,经过一些简单的实验干净相当不错。

不过目前有个问题,FancyBox 的弹窗不支持鼠标拖动,有何现成的解决办法没?

FancyBox 官方文档没这方面的介绍,有提到加载一个 mousewheel 的js,但这个只是用来处理鼠标滚轮事件的,不加载也不影响。

有没有人对它进行改造,使之支持鼠标拖动窗体呢?

加载中
0
用户已屏蔽
用户已屏蔽

红薯,我就期待你写好啦,到时候我就再借鉴使用啦,哈

0
andy.liu
andy.liu

鼠标拖动可以直接用第三方的jquery拖动插件解决。

不知道FancyBox可不可以支持通过鼠标滚轮的滚动来进行图片的放大缩小啊。

如果谁有办法,麻烦贴出来看看

0
Hell_O
Hell_O
该评论暂时无法显示,详情咨询 QQ 群:点此入群
0
flygogo
flygogo
http://fromvega.com/code/easydrag/jquery.easydrag.handler.beta2.js

这个里面好像有一个插件支持,但是好像oschina不太符合,因为它没有过滤textarea,input等元素问题。

 

自己也写了一个js ,用于drag的js 对象,红薯老大帮看下:

var getCurrentStyle = function(el, styleName) {
	return document.all ? el.currentStyle[styleName] : window.getComputedStyle(el,null)[styleName];
}
function AbsDrag(elem, elemHeader, autoAdjust) {  //elem: 被drag的移动对象, elemHeader drag部分。
	return ({
		Create: function(elem, elemHeader, autoAdjust) {
			this.elem = elem;
			this.elemHeader = elemHeader;
			// 注释部分防止文字被选择。
			//this.elemHeader.unselectable = "on";
			//this.elemHeader.onselectstart = function(event) {event.preventDefault();event.stopPropagation();return false;};
			var self = this;
			this.elemHeader.onmousedown = function(event) {self.dragStart(event)};
			this.posX = 0;
			this.posY = 0;
	
			this.mgLeft = parseInt(getCurrentStyle(this.elem, "marginLeft"));
			this.mgTop = parseInt(getCurrentStyle(this.elem, "marginTop"));
			this.elem.style.left = (this.elem.offsetLeft - this.mgLeft) + "px";
			if (!!autoAdjust) {
				var docHeight =  document.documentElement.clientHeight;
				if (this.elem.offsetHeight<docHeight) {
					this.elem.style.top = (docHeight - this.elem.offsetHeight)/2 + "px";
				} else {
					this.elem.style.top = "30px";
				}
			} else {
				this.elem.style.top = (this.elem.offsetTop - this.mgTop) + "px";
			}
		},
		
		fixE: function(event) {
			var event = event || window.event;
			if (typeof event.which == "undefined") {
				event.which = event.button;
		    }
			
			return event;
		},
		
		dragStart: function(event) {
			var event =  this.fixE(event);
			if (event.which != 1) {
				return true;
		    }
			var eventElem ;
			if (event.srcElement) {
				eventElem = event.srcElement;
			} else {
				eventElem = event.target;
			}
			
			var elemTagName = eventElem.tagName.toUpperCase();
			if (elemTagName==="TEXTAREA" || elemTagName==="INPUT" || elemTagName==="SELECT") {       // 一些操作性的元素不能被drag,否则无法输入。
				return true;
			}
			
			this.posX = event.clientX - parseInt(this.elem.style.left);
			this.posY = event.clientY - parseInt(this.elem.style.top);
			var self = this;
			document.onmousemove = function(event) {self.dragWhen(event)};
			document.onmouseup = function(event) {self.dragEnd(event)};
			document.onmousedown = function(){return false;};
			document.body.style.cursor = 'move';
		},
		
		dragWhen: function(event) {
			var event =  this.fixE(event);
			if (event.which == 0) {
				return this.dragEnd(event);
			}
			var newX = event.clientX - this.posX;
			var newY = event.clientY - this.posY;
			if (((newX+this.mgLeft)>0) && ((newX+this.mgLeft+parseInt(this.elem.offsetWidth)) < parseInt(document.body.offsetWidth)))
				this.elem.style.left = newX + "px";
			if (((newY+this.mgTop)>0) && ((newY+this.mgTop+parseInt(this.elem.offsetHeight)) < parseInt(document.body.offsetHeight)))
				this.elem.style.top = newY + "px";
		},
		
		dragEnd: function(event) {
			document.onmousemove = null;
		    document.onmouseup = null;
		    document.onmousedown = null;
		    document.body.style.cursor = "default";
		}
	}).Create(elem, elemHeader, autoAdjust);
};
只要在你初始化,poshytip 后,写上这么一句就行了。
 AbsDrag(document.getElementById('fancybox-wrap'), document.getElementById('fancybox-wrap'));

OSCHINA
登录后可查看更多优质内容
返回顶部
顶部