简明现代魔法 -> JavaScript -> 点着元素区域也可以实现拖拽

点着元素区域也可以实现拖拽

2011-05-07

在开发拖动效果时,有一个非常恼人的地方要处理时,就是拖动时,文本被选中蓝色一片,容易造成用户分心,有损用户体验。通常我们是用下面代码来清理selection:

if(window.getSelection){
	//w3c
	window.getSelection().removeAllRanges();
}
else if(document.selection){
	//IE
	document.selection.empty();
}

但这东西在谷歌浏览器中,快速拖动还是会出现蓝色(人家的渲染效率就是高),另外,每拖动一像素就清理一次,这频繁的调用对于一些旧式浏览器可不是好事。最近研究CSS3,发现user-select这个东西,终于搞定这问题了。

首先,我们要检测浏览器是否支持它,FF与webkit系浏览器是支持,IE9与opera11是不支持。

var getStyleName= (function(){
	var prefixes = ['', '-ms-','-moz-', '-webkit-', '-khtml-', '-o-'];
	var reg_cap = /-([a-z])/g;
	
	function getStyleName(css, el) 
	{
		el = el || document.documentElement;
  		var style = el.style,test;
		for (var i=0, l=prefixes.length; i < l; i++) 
		{
      		test = (prefixes[i] + css).replace(reg_cap,function($0,$1){
    			return $1.toUpperCase();
            });
            if(test in style){
         		return test;
            }
     	}
    	return null;
   	}
	return getStyleName;
})();
alert(getStyleName("user-select"))

对于不支持的浏览器,我们可以借助它们的一些私有属性与事件,如unselectable,onselectstart。当拖动时,我们把它们绑定在文档对象上就行了。

if(typeof userSelect === "string"){
	return document.documentElement.style[userSelect] = "none";
}
document.unselectable  = "on";
document.onselectstart = function(){
	return false;
}

当拖动结束时,我们再让文档变回可选择模式,注意一些值的变化,都是很奇特的名字。

if(typeof userSelect === "string"){
	return document.documentElement.style[userSelect] = "text";
}
document.unselectable  = "off";
document.onselectstart = null;

具体应用见下:

随机文章推荐
网站分类


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

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


 

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

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