zoukankan      html  css  js  c++  java
  • 代码空间项目 -- 窗口移动

    1.js控制
    var msgTitle=document.createElement("div");

    msgTitle.onmousedown=function(e){
            var ev1=e||window.event;
            //获取元素的外边距
            var left=msgBox.offsetLeft;
            var top=msgBox.offsetTop;
            //获取鼠标的坐标
            var x=ev1.clientX;
            var y=ev1.clientY;
            var x3=x-left;
            var y3=y-top;
            //鼠标移动的时候
            document.onmousemove=function(e){
                var ev2=e||window.event;
                //获取鼠标移动后的坐标
                var x2=ev2.clientX;
                var y2=ev2.clientY;
                //计算元素新的坐标
                var newleft=x2-x3;
                var newtop=y2-y3;
                //限制边界
                if(newleft<=0){newleft=-(msgBox.offsetWidth*0)}
                if(newtop<=0){newtop=0};
                msgBox.style.left=newleft+"px";
                msgBox.style.top=newtop+"px";
                
            };
            document.onmouseup=function(){
                document.onmousemove=null;
                document.onmouseup=null;
            }

    }

    2.jQuery控制
    var loginTitle=$("<div></div>");

    //窗体移动事件
    loginTitle.mousedown(function(e){
            var ev=e||window.event;
            //获取元素的边距
            var loginX=login.offset().left;
            var loginY=login.offset().top;
            //获取鼠标点击时的坐标
            var monseX=ev.clientX;
            var monseY=ev.clientY;
            //计算元素坐标与鼠标坐标的差值
            var chaX=parseFloat(monseX)-parseFloat(loginX);
            var chaY=parseFloat(monseY)-parseFloat(loginY);
            document.onmousemove=function(e){
                var ev2=e||window.event;
                //获取鼠标移动后的坐标
                var x2=ev2.clientX;
                var y2=ev2.clientY;
                //计算元素新的坐标
                var newleft=x2-chaX;
                var newtop=y2-chaY;
                //限制边界
                if(newleft<=0){newleft=0}
                if(newtop<=0){newtop=0};
                login.css({"top":newtop+"px","left":newleft+"px"});
                
            };
            document.onmouseup=function(){
                document.onmousemove=null;
                document.onmouseup=null;
            }
    });

  • 相关阅读:
    Linux-grep 命令和find 命令 (6)
    第1阶段——u-boot分析之make 100ask24x0_config指令(1)
    shell变量$(CURDIR),$0,$1,$2,$#含义解释
    ln命令详解
    快速解决设置Android 23.0以上版本对SD卡的读写权限无效的问题
    java.io.IOException: Cleartext HTTP traffic to xxx.xxx.xxx.xxx not permitted
    AndroidStudio 3.0中之后无法打开DDMS [Android Device Monitor] 问题
    解决android sdk docs帮助文档打开慢的问题
    Android Intent的使用
    约束布局ConstraintLayout详解
  • 原文地址:https://www.cnblogs.com/zmc-change/p/5382103.html
Copyright © 2011-2022 走看看