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

时间：2011-04-27 来源：前端开发（xing）

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

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

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

初始版本的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%',

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

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

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

helper:function(){
                                                        var div=$('<div/>').css({
                                                                width:100,
                                                                
                                                        return div;
                                                }

效果如下

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

下载

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