面向对象的类中封装一个拖拽的方法

var Utils=(function(){
    return {
        randomColor:function(){
            var col="#";
            for(var i=0;i<6;i++){
                col+=Math.floor(Math.random()*16).toString(16);
            }
            return col;
        },
        ce:function(type,style,parent){
            var elem=document.createElement(type);
            if(style){
                for(var prop in style){
                    elem.style[prop]=style[prop];
                }
            }
            if(typeof parent==="string") parent=document.querySelector(parent);
            if(parent) parent.appendChild(elem);
            return elem;
        },
        dragElem:function(elem,parentOut){
            //该函数中的this为外层对象Utils
            elem.obj=this;  
            elem.style.position="absolute";
            document.parentOut=parentOut;  //将传入的parentOut存入document的对象属性parentOut中,方便以下函数调用
            elem.addEventListener("mousedown",this.mousedownHandler);
        },
        mousedownHandler:function(e){
            //该函数中的this为elem,即实际侦听的元素
            if(e.type==="mousedown"){
                e.preventDefault();
                document.x=e.offsetX;  //把鼠标点击位置的信息存入document对象属性x与y中,offset为相对事件目标对象elem左上角的距离
                document.y=e.offsetY;
                document.div=this;    //将实际侦听的元素存入document的对象div里
                document.obj=this.obj; //this.obj即elem.obj  而在elem.obj中存了Utils,所以是将Utils存在了document对象的属性obj中
                document.addEventListener("mousemove",this.obj.mousedownHandler);  //这里的this.obj===elem.obj即Utils
                document.addEventListener("mouseup",this.obj.mousedownHandler);

            }else if(e.type==="mousemove"){
                //当前函数中的this为document
                var left,top;
                var rect=this.div.parentElement.getBoundingClientRect(); //获取元素的矩形界限范围
                var x=e.clientX-this.x-rect.x;  
                var y=e.clientY-this.y-rect.y;//控制元素的left和top等于
                //当前点击位置距离视窗的距离e.client-点击处相对事件目标对象elem左上角的距离-elem父元素相对视窗的距离rect.x/y
                if(this.parentOut===true){
                    if(x<0) x=0;  //如果元素左边超过父元素即left:x<0,让他固定在0即可
                    if(x>=rect.width-this.div.offsetWidth) x=rect.width-this.div.offsetWidth; //如果元素超过父元素边框,就使left
                    //等于父元素的宽-当前元素的宽。使其不超过父元素
                    if(y<0) y=0;
                    if(y>=rect.height-this.div.offsetWidth) y=rect.height-this.div.offsetHeight;
                }else if(typeof this.parentOut==="object"){ //如果parentOut中传入的是对象,对象中存储的是位置信息。
                    if(x<0) x=0;        //则left等于传入的x轴活动范围this.parentOut.width-当前元素的宽
                    if(x>=this.parentOut.width-this.div.offsetWidth) x=this.parentOut.width-this.div.offsetWidth;
                    if(y<0) y=0;
                    if(y>=this.parentOut.height-this.div.offsetHeight) y=this.parentOut.height-this.div.offsetHeight;
                    if(this.parentOut.width===0) x=0;
                    if(this.parentOut.height===0) y=0;
                }
                this.div.style.left=x+"px";
                this.div.style.top=y+"px";
            }else{
                document.removeEventListener("mousemove",this.obj.mousedownHandler);
                document.removeEventListener("mouseup",this.obj.mousedownHandler);
            }
        },
        /*
        将上面临时存储在elem.obj和document.obj里的Utils置空,并且移除事件。 
         */
        dragOff:function(elem){ 
            elem.obj=null;
            document.obj=null;
            elem.removeEventListener("mousedown",this.mousedownHandler);
        }
    }
})()
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
面向对象编程(Object-Oriented Programming,简称OOP)是一种编程范式或编程风格,它将现实世界的事物抽象成为对象,通过对对象的抽象、封装、继承和多态等特性,来实现程序的模块化、可靠性和可复用性等优点。 面向对象编程和面向过程编程各自的优缺点如下: 1. 面向对象编程的优点: - 易于扩展和维护:面向对象编程通过封装、继承和多态等机制,可以使得程序的各个部分相互独立,易于修改和扩展。 - 提高开发效率:通过对象的抽象和封装,可以将复杂的问题简化为简单的对象,从而提高开发效率。 - 代码可复用性高:面向对象编程通过继承和多态等机制,可以使得代码的复用性更高。 2. 面向过程编程的优点: - 内存利用率高:面向过程编程不需要创建对象,因此内存利用率更高。 - 执行速度快:由于不需要创建对象,因此执行速度更快。 在JavaScript面向对象编程主要靠对象字面量、构造函数、原型和等语法实现。其,对象字面量是一种简单的创建对象的方式,构造函数则可以用来创建多个相似的对象,原型可以用来实现继承,而则是ES6新增的一种语法糖,可以更加方便地实现面向对象编程。 弹出层案例的实现思路: 1.创建一个div元素作为弹出层,设置其样式和内容。 2.创建一个按钮或链接,用于触发弹出层的显示。 3.通过JavaScript获取按钮或链接的点击事件,并在事件处理程序显示弹出层。 4.为了实现点击弹出层以外的区域,关闭弹出层的功能,需要在弹出层显示时,通过JavaScript创建一个遮罩层,并为其添加点击事件,用于隐藏弹出层和遮罩层。 5.如果需要支持拖拽功能,可以通过JavaScript获取弹出层的mousedown、mousemove和mouseup事件,并在事件处理程序实现拖拽效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值