元素拖动(外部封装函数)

//调用该函数时传的参数是对象
// 如 :dragable({
//      down:p,        //点击的元素
//      target : div,  //移动的目标元素
//      ranger: div,   //其有定位的父元素
//      moving : function(x,y){   //移动时要执行的函数
//          
//      },
//      ending :function(){        //结束时要执行的函数
//          console.log("拖拽结束");
//      }
//  })

function dragable(options){
    var father=options.ranger||window;//设定其有定位的父元素
    options.down.onmousedown=function(e){

        var e=e||event;         
        var pos={                     
            x:e.offsetX,
            y:e.offsetY
        };
        document.onmousemove=function(e){
            var e=e||event;
            var maxleft=father.offsetWidth||window.innerWidth;
            var maxtop=father.offsetHeight||window.innerHeight;
            var _left=Math.max(0,Math.min(maxleft-options.target.offsetWidth,e.pageX-pos.x-getPagePosition(father).left));
            var _top=Math.max(0,Math.min(maxtop-options.target.offsetHeight,e.pageY-pos.y-getPagePosition(father).top));
            options.target.style.margin="0px";//如果有margin,将margin设为0
            options.target.style.left=_left+"px";
            options.target.style.top=_top+"px";
            options.moving?options.moving(_left,_top):"";

        }
    }
    document.onmouseup=function(){
        document.onmousemove=null;
        options.ending?options.ending():"";
    }
}

//计算元素在页面的绝对位置
function getPagePosition(target){
    var sumleft=target.offsetLeft;
    var sumtop=target.offsetTop;
    while(target.offsetParent != null){
        sumleft+=target.offsetParent.offsetLeft;
        sumtop+=target.offsetParent.offsetTop;
        target=target.offsetParent;
    }
    return {
    left:sumleft,
    top:sumtop
    };
}