simpleDrag的第一个版本（simpleUI子项目）

这些天，因为项目完工的原因，难得休息几天，就趁着这些日子多写点东西。让自己可以更快的成长。

本来以为拖动是件很简单的事情，但是仔细考虑起来还是挺麻烦的~~

使用库编程的最大好处就是不用考虑那么多复杂的兼容性问题~

初始版本的simpleDrag支持以下几个功能

1：基本的拖动

2：在制定范围内的拖动

3：拖动代理

4：拖动触发的handle

5：iframeFix

拖动无非就是触发三个事件~mousedown，mousemove，mouseup。在鼠标按下的时候记住当前位置，移动的过程中更新代理或者对象本身的位置，弹起的时候更新对象的位置，解除为document绑定的事件就行了，是不是很简单？下面开始编码

声明个构造函数

var SimpleDrag= function(el,config) {
		var defaults= {
			handle:null,
			x:false,
			y:false,
			container:null,
			helper:null,
			iframeFix:false,
			ondragstart:$.noop,
			ondragmove:$.noop,
			ondragstop:$.noop
		};
		config=$.extend({},defaults,config);
}

我发现我不喜欢在原型链上添加方法~失败。。。

我会在构造函数的内部声明一个对象然后把逻辑写在里面，当然这种习惯非常不好吧。争取在以后改。。

首先针对handle的问题。其实就是谁触发mousedown事件的问题。

if(config.handle) {
			
			$(el).each( function() {
				var that=this;
				$(config.handle,this).mousedown( function(e) {
					drag.domousedown(e,that);
				});
			});
		} else {
			$(el).mousedown( function(e) {
				drag.domousedown(e,this)
			});
		}

在mousedown事件使用对象存储当前拖动目标的位置

var x=e.pageX,y=e.pageY,s=drag;
				s.ddManage.oldPositionDrag=[x,y];
				s.ddManage.oldPosition=$(parent).offset();
				s.ddManage.dragEl=$(parent);

在mousemove事件更新值

updatePosition: function(proxyEl,e) {
				var container;
				config.container==null?container=document.body:container=config.container;
				var s=drag,self=this;
				var conSize=self.getContainerPosition(container);
				var leftSize=s.ddManage.oldPosition.left+(e.pageX-s.ddManage.oldPositionDrag[0]),
				topSize=s.ddManage.oldPosition.top+(e.pageY-s.ddManage.oldPositionDrag[1]);
				leftSize=leftSize<conSize.left?conSize.left:leftSize;
				topSize=topSize<conSize.top?conSize.top:topSize;
				topSize=topSize+s.ddManage.dragEl.outerHeight()>conSize.bottom?conSize.bottom-s.ddManage.dragEl.outerHeight():topSize;
				leftSize=leftSize+s.ddManage.dragEl.outerWidth()>conSize.right?conSize.right-s.ddManage.dragEl.outerWidth():leftSize;
				proxyEl.css({
					left:leftSize,
					top:topSize
				});
}

其中需要有个考虑的问题就是在指定的范围内拖动。在拖动的过程中，计算当前的offset的left值是否小于指定范围的offset的left值，加上拖动对象的宽度是否大于指定范围的右边距的值。

还有就是同级的iframe的问题，我们可以在拖动的过程中使用一个Div设定其透明度为0来遮住iframe，防止拖动的过程中出现抖动的情况。

s.ddManage.iframeFix.appendTo(document.body).css({
						position:'fixed',
						width:'100%',
						height:'100%',
						zIndex:10,
						background:'#fff',
						top:0,
						left:0,
						opacity:0
					});

在IE7下貌似有个奇怪的问题，如果DIV的背景是transparent的话，是遮不住任何东西的~~所以要设定background。

helper这个属性接受三个值“clone”，null，function(){}

如果要自定义拖动代理的话，可以自定义像下面的函数

helper:function(){
							var div=$('<div/>').css({
								width:100,
								height:20,
								background:'red',
								color:'#fff',
								fontWeight:'bold',
								textAlign:'center',
								position:'absolute',
								zIndex:100000
							}).html('我是代理');
							return div;
						}

效果如下

目前值得注意的就这么多，但是还有很多功能要写。这个只是预览版~~

下载

http://u.115.com/file/f5f5a4b82c