JavaScript 元素拖拽

var EventUtil = {
    /**
     * 兼容性的添加事件
     * @Author  xxxx
     * @DateTime 2018-01-17
     * @param    {Element}   element 元素类型
     * @param    {String}   type    事件名称
     * @param    {响应函数}   handler 响应函数
     */
    addHandler:function(element,type,handler){
        if(element.addEventListener){
            //DOM2
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
            //IE
            element.attachEvent("on"+type,handler);
            alert("IE");
        }else {
            //DOM0
            element["on"+type] = handler;
            alert("DOM0");
        }
    },
    removeHandler:function(element,type,handler){
        if(element.removeEventListener){
            //DOM2
            element.removeEventListener(type,handler,false);
        }else if(element.datachEvent){
            //IE
            element.datachEvent("on"+type,handler);
            alert("IE");
        }else {
            //DOM0
            element["on"+type] = null;
            alert("DOM0");
        }
    }

}

//拖拽函数

function drag(e) {
    console.log('draging');
    let width = $("#in").width();
    let height = $("#in").height();
    let maxWidth = $(document).width()-width;
    let maxHeight = $(document).height()-height;
    let x = (e.clientX - width / 2) > maxWidth ? maxWidth: e.clientX - width / 2;
    let y = (e.clientY - height / 2) > maxHeight ? maxHeight: e.clientY - height / 2;
    console.log(x,y);
    $("#in").css({
        left: x >= 0 ? x : 0,
        top: y >= 0 ? y : 0
    });

}

//添加 mousemove事件

function addMove(){
    let inner=document.getElementById('in');
    console.log('addMove');
    // inner.style.cursor = 'move';
    EventUtil.addHandler(inner,"mousemove",drag);

}

let inner=document.getElementById('in');

EventUtil.addHandler(inner,"mousedown",()=>{
         EventUtil.addHandler(window,"mousemove",drag);
          EventUtil.addHandler(window,"mouseup",reMove);
   })