ES6 用class方式实现鼠标拖拽

ES6 用class方式实现鼠标拖拽

鼠标拖拽div ，div随机颜色生成

    <script>
        //1.首先创建一个拖拽类
        class Drag {
            constructor() {//constructor 类的构造函数
            //这个了作用域里 this 代表着new操作符创建的空实例对象
                //2.新建一个dom节点                
                this.div = document.createElement('div')
                //3.给dom节点设置一些样式
                this.div.style.cssText = `
                     width:100px;
                     height:100px;
                     position:absolute;
                     background:green;
                     left:0;
                     top:0;
                     `
                //4.让dom节点上树
                document.body.appendChild(this.div)
                //调用随机颜色方法
                this.random()
                //5.调用开始方法，也就是监听鼠标按下            
                this.start()
            }
            start() {
                //开始方法
                //在此方法中监听鼠标按下
                //该方法需要在构造函数里调用，用来创建一个，就start方法
                //在start作用域里this代表着 new操作符创建的实例对象
                //6.监听鼠标按下事件
                this.div.onmousedown =  (evt)=> {
                    //因为let只在当前作用域中起作用。所以，我们这里用this. 也就是用属性的方法，保存值
                    //7.需要先找到鼠标在按下时的位置
                    this.downX=evt.clientX;
                    this.downY=evt.clientY;
                    //8.找到，div移动前的位置
                    this.downLeft=this.div.offsetLeft;
                    this.downTop=this.div.offsetTop;
                    //这个作用域里this 代表着 onmousedown前面的变量 也就是this.div 也就是div
                    //div 是没有move的方法的，所以我们这里用箭头函数来解决这个问题
                    //因为箭头函数是没有this的，如果出现，他会向上找。
                    //现在this 代表的就是new操作符创建的实例对象
                    //9.调用移动方法 也就是监听鼠标移动事件
                    this.move()
                    //10.调用停止方法  也就是监听鼠标停止事件
                    this.end()
                }
            }
            move() {
                //移动方法
                //在此方法中监听鼠标移动
                //在此作用域中，this 代表着 new操作符创建的实例对象
                 let that=this
                //11.监听鼠标移动               
                window.onmousemove=function(evt){
                     //这个作用域里this 代表着 onmousemove前面的变量 也就是window
                     //window 是没有new操作符创建的实例对象的属性的，这里我们可以换一种方式解决这个问题
                     //我们可以把上面作用域的this先存起来
                     //这样that 就是d1
                     //12.得到div移动的距离，就是现在的鼠标坐标减去移动前的鼠标坐标
                     let moveX=evt.clientX-that.downX;
                     let moveY=evt.clientY-that.downY;
                     //13.改变div的left 就是div在移动前的位置加上移动的距离
                     that.div.style.left=that.downLeft+moveX+'px';
                     that.div.style.top=that.downTop+moveY+'px';

                }
            }
            end() {
                //停止方法
                //在此方法中监听鼠标抬起
                //14.监听鼠标抬起
                window.onmouseup=function(){
                    //15.请鼠标移动，与鼠标抬起
                    window.onmousemove=null;
                    window.onmouseup=null;
                }
            }
            random(){
                //随机颜色方法
                //在此方法中随机颜色
                //在此作用域中，this代表着new操作符创建的实例对象
                //15.随机颜色
                //方法一
                // let r=Math.floor(Math.random()*256)
                // let g=Math.floor(Math.random()*256)
                // let b=Math.floor(Math.random()*256)
                //设置颜色
                // this.div.style.backgroundColor=`rgb(${r},${g},${b})`          
                //方法二
                let r=Math.floor(Math.random()*0xFFFFFF)//0xFFFFFF 代表16进制数
                //0xFFFFFF只是指定了随机数的范围，但是得到的随机数，依然是以10进制的数展现的
                r=r.toString(16)//转化成16进制数
                r=('000000'+r).slice(-6);//前面补0
                //设置颜色
                this.div.style.backgroundColor=`#${r}`

            }

        }
        //调用
        new Drag();
        //如果要多个div的话。在控制台，执行上面语句就可以了
    </script>