可拖拽的窗体(让窗体随着鼠标移动)

html代码:

这个时基本的代码框架,可以根据你的需求进行添加内容

<div class="nav">
    <a href="javascript:;" id="register">注册信息</a>
</div>
<div class="d-box" id="d_box">
    <div class="hd" id="drop">注册信息 (可以拖拽)
        <span id="box_close" onClick="closeWin()">关闭</span>
    </div>
    <div class="bd"></div>
</div>

css代码:

  cursor: pointer;是设置鼠标的形状为手的形状
 * {
            margin: 0;
            padding: 0;
        }

        .nav {
            height: 30px;
            background: #036663;
            border-bottom: 1px solid #369;
            line-height: 30px;
            padding-left: 30px;
        }

        .nav a {
            color: #fff;
            text-align: center;
            font-size: 14px;
            text-decoration: none;

        }

        .d-box {
            width: 400px;
            height: 300px;
            border: 5px solid #eee;
            box-shadow: 2px 2px 2px 2px #666;
            position: absolute;
            top: 40%;
            left: 40%;
        }

        .hd {
            width: 100%;
            height: 25px;
            background-color: #7c9299;
            border-bottom: 1px solid #369;
            line-height: 25px;
            color: white;
            cursor: move;
        }

        #box_close {
            float: right;
            cursor: pointer;
			display: block;
        }

JavaScript代码:

closeWin()这个函数是对一些浏览器的判断兼容性

<script>
    //找人
	 var box_close = document.getElementById("box_close");
    var d_box = document.getElementById("d_box");//盒子
    var drop = document.getElementById("drop");//拖动条
	//当点击关闭时,整个注册框消失(各种浏览器的兼容问题)
	  function closeWin(){
            if (navigator.userAgent.indexOf("Firefox") != -1 || navigator.userAgent.indexOf("Chrome") !=-1) {
                window.location.href="http://localhost/fastflow/winform/cn/myprocessform.aspx";
                window.close();
            }
		    else {
                window.opener = null;
                window.open("", "_self");
                window.close();
            }
	}
    //需求:鼠标在拖动条上按下 可以拖拽 鼠标移动的时候 让d_box跟着鼠标移动
    drop.onmousedown = function (event) {
        var event = event || window.event;
        //获取鼠标在页面中的位置
        var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
        var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
        //获取鼠标在按下的那一瞬间在盒子中的位置
        var boxX = pageX - d_box.offsetLeft;
        var boxY = pageY - d_box.offsetTop;
        //鼠标在页面上移动 让d_box跟着鼠标移动
        document.onmousemove = function (event) {
            var event = event || window.event;
            //获取鼠标在页面上的位置
            var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
            var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
            //让d_box跟着鼠标移动
            d_box.style.left = pageX - boxX + "px";
            d_box.style.top = pageY - boxY + "px";
            //清除选中文字
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        };
    };

    //鼠标弹起 盒子就不应该跟着了
    document.onmouseup = function () {
        document.onmousemove = null;
    };

</script>

该代码段可能不支持一些浏览器,本人目前掌握的支持有限,希望有大佬提点意见,请在下面留言,我会进行改进,谢谢你们的支持!!!

发布了10 篇原创文章 · 获赞 13 · 访问量 342

猜你喜欢

转载自blog.csdn.net/weixin_46483221/article/details/104819239