用JavaScript实现点击文档创建元素，并且可以拖拽该元素

用JavaScript实现点击文档创建元素，并且可以拖拽该元素

    // 点击文档创建元素，并且可以拖拽该元素
   // 引入js文件
     <script src="js/Utils.js"></script>
     var Utils=(function(){
return{
  
    // 求多少到多少之间的随机整数
    randoms:function(max,min){
        if(min===undefined) min=0;
        return Math.floor(Math.random()*(max-min)+min);
    },
    // 随机颜色
    randomColor:function(){
        var col="#";
        for(var i=0;i<6;i++){
            col+=this.randoms(16).toString(16);
        }
        return col;
    },
    // 封装版的拖拽
    // 不能再容器内拖拽
    dragOn(elem){
        elem.self=this;
        elem.addEventListener("mousedown",this.mouseHandler);
    },
    dragOff(elem){
        elem.removeEventListener("mousedown",this.mouseHandler);
    },
    mouseHandler(e){
        if(e.type==="mousedown"){
            e.preventDefault();
            // this   是按下的元素
            // document.div=this;
            document.div=e.target;
            document.offset={x:e.offsetX,y:e.offsetY};
            document.self=this.self;
            document.addEventListener("mousemove",this.self.mouseHandler)
            document.addEventListener("mouseup",this.self.mouseHandler)
        }else if(e.type==="mousemove"){
            // this  document
            // this.div  按下的元素
            document.div.style.left=e.clientX-document.offset.x+"px";
            document.div.style.top=e.clientY-document.offset.y+"px";
        }else if(e.type==="mouseup"){
            // this document
            document.removeEventListener("mousemove",document.self.mouseHandler)
            document.removeEventListener("mouseup",document.self.mouseHandler)
        }
    }
}

})();

    // 执行初始化函数
    init();
    // 创建初始化函数
    function init(){
        // 创建点击事件执行点击事件函数
        document.addEventListener("click",clickHandler);
       
    }
    // 点击后执行点击函数
    function clickHandler(e){
        // 使用js文件中的函数求随机数
        var w=Utils.randoms(50,40);
        // 根据标签名创建标签元素
        var div=document.createElement("div");
        // 给div设置宽高
        div.style.width=w+"px";
        div.style.height=w+"px";
        // 给div设置随机颜色
        div.style.backgroundColor=Utils.randomColor();
        // 设置定位属性
        div .style.position="absolute";
        // 使元素创建位于鼠标的中心位置
        div.style.left=e.x-w/2+"px";
        div.style.top=e.y-w/2+"px";
        // 把创建好的元素放在body中
        document.body.appendChild(div)
        // 根据标签名获取页面中的所有div
        var divs=document.querySelectorAll("div");
        // for循环获取到每个div
        for(var i=0;i<divs.length;i++){
            // 给每个div设置拖拽
            Utils.dragOn(divs[i]);
             }
        
        console.log("aa")
    }