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

旧城等待， 2023-07-23 03:42 2阅读 0赞

// 点击文档创建元素，并且可以拖拽该元素
       // 引入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")
        }