js实现模态窗口的拖拽功能-创新互联

一.用到的几个基本概念:

集宁网站建设公司成都创新互联公司,集宁网站设计制作,有大型网站制作公司丰富经验。已为集宁超过千家提供企业网站建设服务。企业网站搭建\外贸网站制作要多少钱,请找那个售后服务好的集宁做网站的公司定做!

       (1)document.body.clientWidth/clientHeight :获得BODY对象宽度/高度
       (2)document.documentElement.clientWidth/clientHeight:用来获得可见区域宽度/高度。

          clientWidth/clientHeight的计算方法:

             js实现模态窗口的拖拽功能

(3)offsetParent 是一个只读属性,返回一个指向最近的(closest,指包含层级上的最近)包含该元素的定位元素。如果没有定位的元素,则 offsetParent 为最近的 table 元素对象或根元素(标准模式下为 html;quirks 模式下为 body)。

offsetLeft:获取对象相对于页面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于页面或由 offsetTop 属性指定的父坐标的计算顶端位置

       offsetWidth/offsetHeight计算方法:

           js实现模态窗口的拖拽功能

(4)clientX/clientY :事件属性返回当事件被触发时鼠标指针向对于浏览器页面(当前窗口)的水平坐标/垂直坐标(不包含滚动条)。

二.拖拽的主要实现思想

     分为三步:

          (1)用户在拖放元素上按下鼠标,拖放开始

               login.addEventListener("mousedown",drag,false);
          (2)用户在拖放元素上移动鼠标,拖放元素在页面中进行拖动

                 document.addEventListener("mousemove",move,false);

          (3)用户鼠标一开拖放元素,拖放行为结束

                document.addEventListener("mouseup",up,false);

三.实现具体js代码

window.onload = function () {

    var close = document.getElementsByClassName('close');
    var login = document.getElementById('login');
    var logins = document.getElementsByClassName('login');
    var screen = document.getElementById('dropback'); 
 
    function show(obj) {
        //获取浏览器的宽和高
        var top = (document.documentElement.clientHeight - 250) / 2 - 150;
        var left = (document.documentElement.clientWidth - 300) / 2;
        //当点击登录按钮时,登录弹窗出现,遮罩层显示
        screen.style.display = 'block'; //遮罩层显示
        obj.style.display = 'block'; //登录弹窗出现
        obj.style.left = left + 'px'; //登录弹窗在屏幕中的位置
        obj.style.top = top + 'px'; 
    }
 
    function hide(obj) {
        //点击差号时,登录弹窗消失,遮罩层消失
        obj.style.display = 'none';
        screen.style.display = 'none';
    }

    //差号注册点击事件 点击差号,弹窗消失   
    close[0].addEventListener("click", function () {
        hide(login);
    }, false);

    //登录按钮注册点击事件,点击登录弹出登录弹窗
    logins[0].addEventListener("click", function () {
        show(login);
    }, false);

    //弹出框拖拽实现
    login.addEventListener("mousedown",drag,false);

    function drag(e){

        var e = e||window.event;    	
    	var _this = this; 	
    	var diffX = e.clientX - _this.offsetLeft;
    	var diffY = e.clientY - _this.offsetTop; 

    	document.addEventListener("mousemove",move,false);
    	document.addEventListener("mouseup",up,false);

    	function move(e){  

         var left = e.clientX-diffX;
         var top = e.clientY-diffY;

            if(left<0){
            	left = 0;
            }else if(left>document.documentElement.clientWidth - e.clientX){
                //没有使用document.body.clientWidth因为此时页面的高度只有100多,而现在要求弹窗在整个可视区中移动
            	left = document.documentElement.clientWidth - _this.offsetWidth;
            }

           if(top<0){
            	top = 0;
            }else if(top>document.documentElement.clientHeight - e.clientY){
            	top = document.documentElement.clientHeight - _this.offsetHeight;
            }

            _this.style.left = left + 'px';
            _this.style.top = top + 'px';
    }

    function up(){

    	    document.removeEventListener("mousemove",move,false);
    		document.removeEventListener("mouseup",up,false);
    }

    }
   
    
 
}

四.实现效果图,随着鼠标的拖拽,弹窗会在整个可视区进行移动

js实现模态窗口的拖拽功能

js实现模态窗口的拖拽功能

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站名称:js实现模态窗口的拖拽功能-创新互联
文章起源:http://pwwzsj.com/article/dsejii.html