月度归档:2011年03月

发现之前写的一段ELEMENT拖动代码,惭愧啊!

先看看大师的写法。通过监听document的事件冒泡,来确定可拖动的元素。

var DragDrop = function(){

	var dragging = null;
	var diffX = 0;
	var diffY = 0;

	function handleEvent(event){
		event = EventUtil.getEvent(event);
		var target = EventUtil.getTarget(event);
		switch(event.type){
			case "mousedown":
			if(target.className.indexOf("draggable") > -1){
				dragging = target;
				dragging.style.position = "absolute";
				diffX = event.clientX - target.offsetLeft;
				diffY = event.clientY - target.offsetTop;
			}
			break;
		case "mousemove":
			if(dragging !== null){
				event = EventUtil.getEvent(event);

				dragging.style.left = (event.clientX - diffX) + "px";
				dragging.style.top = (event.clientY - diffY) + "px";
			}
			break;
		case "mouseup":
			dragging = null;
			break;
	}
};
return {
	enable:function(){
		EventUtil.addHandler(document,"mousedown",handleEvent);
		EventUtil.addHandler(document,"mousemove",handleEvent);
		EventUtil.addHandler(document,"mouseup",handleEvent);
	},
	disable:function(){
		EventUtil.removeHandler(document,"mousedown",handleEvent);
		EventUtil.removeHandler(document,"mousemove",handleEvent);
		EventUtil.removeHandler(document,"mouseup",handleEvent);
		}
	}
}();

然后对比一下自己的代码:单一的逐个元素添加,并且貌似没有回收对象。一旦界面上可拖动的元素过多,后果不堪设想。

(function(){
	var drag = function(domElementID){
		if(document.getElementById(domElementID)){
			var target = document.getElementById(domElementID);
			var diffx=diffy=0;
			var canDrag = false;
			target.onmousedown = function(event){
				canDrag = true;
				var evt = event || window.event;
				var obj = event.target || event.srcElement;
				diffx = evt.clientX - obj.offsetLeft;
				diffy = evt.clientY - obj.offsetTop;
			}
			target.onmousemove = function(event){
				if(!canDrag)
					return false;
				var evt = event || window.event;
				var obj = event.target || event.srcElement;
				obj.style.position = "absolute";
				obj.style.left = (evt.clientX - diffx) + "px";
				obj.style.top = (evt.clientY - diffy) + "px";

			}
			target.onmouseup  = function(){
				diffx=diffy=0;
				canDrag = false;
			}
		}

	}
	window.drag = drag;
})();

网站导航设计模式指南(转载UCD二区)

《写个大家的设计书》《结网》《网站导航设计》这写好书都慢慢融入到了前端开发的阅读范围了,很高兴国内的工程师都开始意识到体验在前端工作中的重要性,相对来说,不是每个公司都会有所谓的“用研”团队,不过接下来的这篇关于导航设计的文章,是对书上知识的一个很好的总结,并且不乏新颖的理念。原文地址:http://ucdchina.com/snap/9203

正文如下:

在网页设计中有一些通用的交互设计模式。网站导航各种各样的通用和大家熟知的设计模式,可以用来作为为网站创建有效地信息架构的基础。这篇指南涵盖了流行的站点导航设计模式。对于每一种网站导航栏设计模式,我们将讨论它的一般特征,它的缺点,以及什么时候使用它最好。

顶部水平栏导航

顶部水平栏导航是当前两种最流行地网站导航菜单设计模式之一。它最常用于网站的主导航菜单,且最通常地放在网站所有页面的网站头的直接上方或直接下方。

继续阅读