jQuery拖放节点

$(document).ready(function(){
drag.init();
})

//拖拽

var drag = {
permitDrag : false,//是否允许移动标识
_x : 0,             //临时节点x坐标
    _y : 0,    //节点y坐标
    _left : 0,          //光标与节点坐标的距离
    _top : 0,           //光标与节点坐标的距离
    old_elm : null,     //拖拽原节点
    old_elm_left:0,     //原节点坐标
    old_elm_top:0,
    old_elm_clone:null, //克隆原节点
    tmp_elm : null,     //跟随光标移动的临时节点
    parent_elm:null,     //拖拽原节点的父元素
    down_parent_pro:0,  //拖拽节点父元素属性
    up_parent_pro:0,    
    surplus_num:0,      //模块数量
    containerTop:0,     //中心区域到顶部距离
    isMove:false,       //是否移动了模块
    old_elm_width:0,    //原节点的宽度
    old_elm_height:0,   //原节点的高度
    isPut:false,         //判断模块是否放在指定区域

    //初始化
    init : function (){
        drag.surplus_num=Number($('#surplus').text());
        drag.containerTop=$('.container').offset().top;

        //监听鼠标按下事件，动态绑定要拖拽的节点（因为节点可能是动态添加的）
        $('.container').on('mousedown', '.dragger', function(event){
            //当在允许拖拽的节点上监听到点击事件，将标识设置为可以拖拽
            drag.permitDrag = true;
            //获取到拖拽的原节点对象
            drag.old_elm = $(this);
            //执行开始拖拽的操作
            drag.mousedown(event);
            return false;
        });

        //监听鼠标移动
        $(document).mousemove(function(event){
            //判断拖拽标识是否为允许，否则不进行操作
            if(!drag.permitDrag) return false;
            //执行移动的操作
            drag.mousemove(event);
            return false;
        });

        //监听鼠标放开
        $(document).mouseup(function(event){
            //判断拖拽标识是否为允许，否则不进行操作
            if(!drag.permitDrag) return false;
            //拖拽结束后恢复标识到初始状态
            drag.permitDrag = false;
            //执行拖拽结束后的操作
            drag.mouseup(event);
            return false;
        });

    },

//按下鼠标 执行的操作
mousedown : function (event){
         drag.isMove=false; //元素未移动
         drag.isPut=false;  //重置模块位置判断      

        //克隆临时节点，跟随鼠标进行移动
        drag.tmp_elm = $(drag.old_elm).clone();

        //计算节点和光标的坐标
        drag._x = $(drag.old_elm).offset().left;
        drag._y = $(drag.old_elm).offset().top-drag.containerTop;

        var e = event || window.event;
        drag._left = e.pageX - drag._x;
        drag._top = e.pageY - drag._y;

        // 原节点宽高
        drag.old_elm_width=$(drag.old_elm).outerWidth();
        drag.old_elm_height=$(drag.old_elm).outerHeight();

        //修改克隆节点的坐标，实现跟随鼠标进行移动的效果
        $(drag.tmp_elm).css({
        'position' : 'absolute',
        'left' : drag._x,
        'top' : drag._y,
            'margin':'0', 
            'paddingLeft':'0',          
            'paddingRight':'0',          
            'width':drag.old_elm_width,           
            'height':drag.old_elm_height
        });

        //添加临时节点
        tmp = $(drag.old_elm).parent().append(drag.tmp_elm);   
        drag.tmp_elm = $(tmp).find(drag.tmp_elm);

        // 获取原节点坐标和克隆
        drag.old_elm_left=drag.old_elm.parent().offset().left;
        drag.old_elm_top=drag.old_elm.parent().offset().top;  
        drag.parent_elm=$(drag.old_elm).parent(); 
        drag.down_parent_pro=drag.parent_elm.attr('data-num');       
    },

//移动鼠标 执行的操作
mousemove : function (event){
        drag.isMove=true;   //元素移动了
        drag.old_elm_clone=$(drag.old_elm).clone();    //克隆原节点
        $(drag.old_elm).remove(); //移除原节点

        //计算坐标
        var e = event || window.event;
        var x = e.pageX - drag._left;
        var y = e.pageY - drag._top;
        var maxL = $('.container').width() - drag.old_elm_width;
        var maxT = $('.container').height() - drag.old_elm_height;

        //不允许超出浏览器范围
        x = x < 0 ? 0: x;
        x = x > maxL ? maxL: x;
        y = y < 0 ? 0: y;
        y = y > maxT ? maxT: y;

        //修改克隆节点的坐标
        $(drag.tmp_elm).css({
        'left' : x,
        'top' : y,
        });  
    },

    //放开鼠标 执行的操作
    mouseup : function (event){
        //移除临时节点
        $(drag.tmp_elm).remove();        
        if(drag.isMove==true){
        //判断所在区域是否允许放置节点
        var e = event || window.event;

        $.each($('.drapBox','.container'), function(index, value){
            //获取容器的坐标范围 (区域)
            var box_x = $(value).offset().left;     //容器左上角x坐标
            var box_y = $(value).offset().top;      //容器左上角y坐标
            var box_width = $(value).outerWidth();  //容器宽
            var box_height = $(value).outerHeight();//容器高
            
            //判断放开鼠标位置是否想允许放置的容器范围内
            if(e.pageX > box_x && e.pageX < box_x-0+box_width && e.pageY > box_y && e.pageY < box_y-0+box_height){
                    //向目标容器添加节点 
                    if($('.container-center').find($(value)).children().length<1){                        
                        $(value).append(drag.old_elm_clone);
                    }else{
                        $(drag.parent_elm).append(drag.old_elm_clone);                     
                    }
                    drag.isPut=true;    //在指定位置放置了元素
                }
            });

        // 判断鼠标指针超出指定范围        
        if(drag.isPut==false){
            $(drag.parent_elm).append(drag.old_elm_clone);
        }

        if (self != top) { 
            //判断鼠标在iframe外部松开
            (window.parent.document).on('mouseup', function () { 
                $(drag.parent_elm).append(drag.old_elm_clone);
                $(drag.tmp_elm).remove();
            });
        }

  // 获取父元素的属性
  drag.up_parent_pro=$(drag.old_elm_clone).parent().attr('data-num');


  if(drag.up_parent_pro=='1'){
            sortModule(); //排序 
        }

        // 模块数量加减
        if(drag.down_parent_pro==1&&drag.up_parent_pro!=1){
            drag.surplus_num-=1;
            $('#surplus').text(drag.surplus_num);
        }else if(drag.down_parent_pro!=1&&drag.up_parent_pro==1){
          drag.surplus_num+=1;
          $('#surplus').text(drag.surplus_num);
      }
  }
}
};