简明现代魔法 -> JQuery -> JQuery简单拖拽效果制作

JQuery简单拖拽效果制作

2010-09-22

说到拖拽功能,现在各大,中,小型网站都基本上有类似的东西,特别是对弹出层拖拽,更是常见的一塌糊涂。。。

其实对于弹出层而言,拖拽最初的目的很单纯,就是为了通过拉开层,使被弹出层挡住的内容可见,(当然,后来关于拖拽的功能不断被优化,使得拖拽的应用有了别的意义,最典型的如igoogle的自定义首页,通过拖放的形式满足用户自定义想要的内容模块顺序和位置)。

本文讨论的重点不是iGoogle的拖放效果,那属于进阶篇,本文是拖拽的“第一阶”,如题,实现最简单的拖拽。

这里的“最简单”即不考虑多个拖拽层的堆叠顺序,不考虑拖拽范围限制,不考虑类似iGoogle的“dragTo”的效果等等。。。

请看下面的效果演示:

效果演示

不设任何options参数的box(默认高200px,宽300px) 无遮罩的box

拖拽其实就涉及的鼠标的三个事件,onmousedown,onmouseup,onmousemove,再结合获取鼠标的位置以及层的left和top即可实现类似的效果。

在编码的时候,有两个需要注意的地方,一个是获取当前样式,currentStyle只在ie下有效,故对于非ie我们可以通过getComputedStyle实现(当然,对于这种需要获取的属性不是很多的情况,您也可以直接用obj.style[key]来获取您当前想要的属性值)。

function getStyle(o,key){return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,null)[key]}//'currentStyle' only for ie5.0+

另一个点就是在获取鼠标位置时要用到event,event这个东西很奇怪,ie下是局部变量,moz内核下是全局变量(说法不准确,只是便于理解),所以在获取鼠标位置时候要对event做个判断:

bar.onmousedown = function(e){ 
	e = e?e:window.event; //'event' ie下局部变量,ff下全局变量
	params.isDrag = true;
	params._X = e.clientX; params._Y = e.clientY;
};

注意以上两点,结合正确的思路其实就可以了,并不难,下面提供参考代码:

function getStyle(o,key){return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,null)[key]}//'currentStyle' only for ie5.0+

var drag = function(bar, target){
var params = {
	startLeft:0,
	startTop:0,
	_X:0,
	_Y:0,
	isDrag:false
};
	if(getStyle(target,'left') != 'auto'){params.startLeft = getStyle(target,'left')}
	if(getStyle(target,'top') != 'auto'){params.startTop = getStyle(target,'top')}
	bar.onmousedown = function(e){ 
		e = e?e:window.event; //'event' ie下局部变量,ff下全局变量
		params.isDrag = true;
		params._X = e.clientX; params._Y = e.clientY;
	};
	document.onmouseup = function(){
		params.isDrag = false;
		if(getStyle(target,'left') != 'auto'){params.startLeft = getStyle(target,'left')}
		if(getStyle(target,'top') != 'auto'){params.startTop = getStyle(target,'top')}
	};
	document.onmousemove = function(e){
		var e = e?e:window.event;
		if(params.isDrag){
			var curX = e.clientX, curY = e.clientY, desL = curX-params._X+parseInt(params.startLeft), desT = curY-params._Y+parseInt(params.startTop);
			target.style['left'] = desL>=0?desL + 'px':0;
			target.style['top'] = desT>=0?desT + 'px':0;
		}
	}
};

相关源代码可以查看本页源代码获得。

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们