jequery插件 - 拖拽插件

(function($)
    {
        //元素拖拽插件
        $.fn.dragdrop = function(o){
            //默认配置
            var def =
            {
                focuEle:null,                    //点击哪个元素开始拖动,可为空。不为空时，需要为被拖动元素的子元素。
                startCallBack:null,             //开始拖动回调
                sstartCallBack:null,            //开始拖动回调
                moveCallBack:null,                //拖动时触发的回调。
                endCallBack:null,               //结束拖动回调
                dragDirection:'all',            //拖动方向：['all','vertical','horizontal']
                fixarea:null                    //限制在哪个区域拖动,以数组形式提供[minX,maxX,minY,maxY]
            };
            $.extend(def, o);
            $(document.body).append("<style>.disable_select{-moz-user-select:none}</style>");
            
            function _disableSelect(){
                return false;
            }
            
            return this.each(function(){
                var $me = $(this);
                //感应区
                var inductions = [];
                //当前所在感应区
                var cur_induction = null;
                //是否正在拖动
                var bDraging = false;
                //是否禁止感应
                var bIsBanInduction = false;
                //移动的元素
                var $move = $me;
                
                //点击哪个元素，以触发移动。
                //该元素需要是被移动元素的子元素（比如标题等）
                var focuEle = def.focuEle ? $me.find(def.focuEle) : $me ;
                //改变鼠标形状
                if(def.focuEle)
                    focuEle.css({'cursor':'move'});
                if(!focuEle || focuEle.length<=0)
                {
                    //alert('focuEle is not found! the element must be a child of '+this.id);
                    //return false;
                }
                // initDiffX|Y : 初始时，鼠标与被移动元素原点的距离
                // moveX|Y : 移动时，被移动元素定位位置 (新鼠标位置与initDiffX|Y的差值)
                // 如果定义了移动中的回调函数，该对象将以参数传入回调函数。
                var dragParams = {
                    $me: $me
                };
                //多选时选中项
                var selectItems = [];
                
                focuEle.bind("click", function(){
                    return false;
                });
                
                //点击时，记录鼠标位置
                //DOM写法： getElementById('***').οnmοusedοwn= function(event);
                focuEle.bind('mousedown',function(e){
                    if(def.sstartCallBack){
                        def.sstartCallBack(e, dragParams);
                    }
                    $(document.body).addClass("disable_select");
                    $(document).bind("selectstart", _disableSelect);
                    
                    var position = $me.position();
                    $move.css({
                        top: position.top,
                        left: position.left,
                        'position': 'absolute'
                    });
                    
                    //标记开始移动
                    bDraging = true;
                    //捕获事件。（该用法，还有个好处，就是防止移动太快导致鼠标跑出被移动元素之外）
                    if(this.setCapture){
                        this.setCapture();
                    }
                    //（实际上是鼠标当前位置相对于被移动元素原点的距离）
                    dragParams.initDiffX = e.pageX - $me.position().left;
                    dragParams.initDiffY = e.pageY - $me.position().top;
                    if(def.startCallBack){
                        def.startCallBack(e, dragParams);
                    }
                });

                //移动过程
                focuEle.bind('mousemove',function(e){
                    if(bDraging)
                    {
                        //被移动元素的新位置，实际上鼠标当前位置与原位置之差
                        //实际上，被移动元素的新位置，也可以直接是鼠标位置，这也能体现拖拽，但是元素的位置就不会精确。
                        dragParams.moveX = e.pageX - dragParams.initDiffX;
                        dragParams.moveY = e.pageY - dragParams.initDiffY;

                        //是否限定在某个区域中移动.
                        //fixarea格式: [x轴最小值,x轴最大值,y轴最小值,y轴最大值]
                        if(def.fixarea)
                        {
                            if(dragParams.moveX<def.fixarea[0])
                            {
                                dragParams.moveX=def.fixarea[0]
                            }
                            if(dragParams.moveX>def.fixarea[1])
                            {
                                dragParams.moveX=def.fixarea[1]
                            }

                            if(dragParams.moveY<def.fixarea[2])
                            {
                                dragParams.moveY=def.fixarea[2]
                            }
                            if(dragParams.moveY>def.fixarea[3])
                            {
                                dragParams.moveY=def.fixarea[3]
                            }
                        }
                        
                        //移动方向：可以是不限定、垂直、水平。
                        if(def.dragDirection=='all')
                        {
                            $move.css({
                                'left':dragParams.moveX,
                                'top':dragParams.moveY
                            });
                        }
                        else if (def.dragDirection=='vertical')
                        {
                            $move.css({
                                'top':dragParams.moveY
                            });
                        }
                        else if(def.dragDirection=='horizontal')
                        {
                            $move.css({
                                'left':dragParams.moveX
                            });
                        }
                                
                        //感应区
                        _moveInduction(e);

                        //如果有回调
                        if(def.moveCallBack)
                        {
                            //将dragParams作为参数传递
                            def.moveCallBack.call(def.moveCallBack,dragParams);
                        }
                    }
                });

                //鼠标弹起时，标记为取消移动
                focuEle.bind('mouseup',function(e){
                    bDraging=false;
                    //禁用选择
                    $(document.body).removeClass("disable_select");
                    $(document).unbind("selectstart", _disableSelect);
                    $me.css({
                        'cursor':'default'
                    });
                    if(this.releaseCapture){
                        this.releaseCapture();
                    }
                    //释放感应
                    _downInduction(e);
                            
                    if(def.endCallBack){
                        def.endCallBack(e, dragParams);
                    }
                });
                
                
                //感应移动
                function _moveInduction(e){
                    if(inductions.length < 1 || bIsBanInduction) return;
                    var p = {};
                    p.$move = $move;
                    p.$drag = $me;
                    p.selectItems = selectItems;
                    var offset = $move.offset();
                    
                    for(var i in inductions){
                        var $m = inductions[i];
                        if($m.length < 1)
                            continue;
                        for(var c=0; c<$m.length; c++){
                            $induction = $($m.get(c));
                            if($induction.css("display")=="none")
                                continue;
                            var i_offset = $induction.offset();
                            var ie_offset = {
                                top: i_offset.top + $induction.outerHeight(),
                                left: i_offset.left + $induction.outerWidth()
                            };
                            if(offset.top >= i_offset.top && offset.left > i_offset.left && offset.top < ie_offset.top && offset.left < ie_offset.left){
                                //在同一感应区移动
                                if(cur_induction == $induction.get(0)){
                                    $(cur_induction).induction_MoveInduction(e, p);
                                    return;
                                }
                                //进入另一个感应区
                                if(cur_induction){
                                    $(cur_induction).induction_OutInduction(e, p);
                                }
                                $induction.induction_OnInduction(e, p);
                                cur_induction = $induction.get(0);
                                return;
                            }
                        }
                    }
                    //移出感应区
                    if(cur_induction){
                        $("#spn1").html($induction.length);
                        $(cur_induction).induction_OutInduction(e, p);
                        cur_induction = null;
                    }
                }
                //释放拖动到感应区
                function _downInduction(e){
                    if(cur_induction){
                        var p = {};
                        p.selectItems = selectItems;
                        p.$move = $move;
                        p.$drag = $me;
                        $(cur_induction).induction_DownInduction(e, p);
                        $(cur_induction).induction_OutInduction(e, p);
                        cur_induction = null;
                    }
                }
                
                //添加感应区
                $me.bind("dragdrop_AddInduction", function(e, $m){
                    inductions.push($m);
                });
                //设置是否禁用感应
                $me.bind("dragdrop_SetInduction", function(e, bBan){
                    bIsBanInduction = bBan;
                });
                //移除感应区
                $me.bind("dragdrop_RemoveInduction", function(e, removes){
                    var temp = [];
                    for(var i in inductions){
                        var $m = inductions[i];
                        var t = false;
                        for(var c in removes){
                            var $r = removes[c];
                            if($r.get(0) == $m.get(0)){
                                t = true;
                                break;
                            }
                        }
                        if(!t){
                            temp.push($m);
                        }
                    }
                    inductions = temp;
                });
                //设置移动对象
                $me.bind("dragdrop_SetMoveMode", function(e, p){
                    $move = p.$drag;
                    selectItems = p.selectItems;
                    $move.css({
                        top: $me.position().top,
                        left: $me.position().left
                    })
                });
            });
        };
                
        $.fn.dragdrop_AddInduction = function($m){
            $(this).trigger("dragdrop_AddInduction", [$m]);
        }
        $.fn.dragdrop_SetBanInduction = function(bBan){
            $(this).trigger("dragdrop_SetInduction", [bBan]);
        }
        $.fn.dragdrop_RemoveInduction = function(removes){
            $(this).trigger("dragdrop_RemoveInduction", [removes]);
        }
        $.fn.dragdrop_SetMoveModel = function(p){
            $(this).trigger("dragdrop_SetMoveMode", [p]);
        }
    })(jQuery);