DIV的拖动和蒙层

.陌路

已于 2022-10-10 15:51:39 修改

阅读量645

点赞数

分类专栏： web前端文章标签： javascript 前端 html

于 2022-10-10 14:30:03 首次发布

本文链接：https://blog.csdn.net/qq_51076413/article/details/127243985

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

JS和CSS实现DIV蒙层和DIV的拖动功能

在这里插入图片描述

<style type="text/css">
	#divMask{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		filter:alpha(opacity=30);
		background-color: #000;
		display: block;
		opacity: 0.3;
		z-index: 2;
	}
</style>

<!-- 弹框蒙层 -->
<div id="divMask"></div>

蒙层

    <style type="text/css">
        .mini-modal {
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            opacity: 0.5;
            -moz-opacity: 0.5;
            filter: alpha(opacity=50);
            background: #000;
            display: block;
            z-index: 999;
        }
    </style>

<div class="mini-modal"></div>

div的拖动

<div id="left_bottom_div_tips_win" style="width: 200px;height: 200px;box-shadow: 1px 1px 5px 2px #999;background: #fff;position: absolute;bottom: 1%;right: 1%;">
    <div class="titleMain" style="height: 20px;background: #f2f2f2;cursor: move;">
        <div id="closeDivWin" style="position: absolute;text-align: center;width: 18px;height: 18px;box-shadow: 0px 0px 0px 1px #d9d9d9;right: 1px;cursor: pointer"
             onclick="$('#left_bottom_div_tips_win').css({'right':'0px','bottom':'0px'})"
             onmouseover="$(this).css('background','red');"
             onmouseout="$(this).css('background','')">➖
        </div>
    </div>
</div>

<script>
    $(function () {
    	// 计算DIV的位置
		var width = Math.max(document.documentElement.clientWidth,document.body.scrollWidth);
		$("#left_bottom_div_tips_win").css({"left":(width-200)/2,"top":"20%"});

		// 绑定DIV拖动事件
        dragPanelMove(".titleMain", "#left_bottom_div_tips_win");

        function dragPanelMove(titleDiv, mainWinDiv) {
            $(titleDiv).mousedown(function (e) {
                var isMove = true;
                var div_x = e.pageX - $(mainWinDiv).offset().left;
                var div_y = e.pageY - $(mainWinDiv).offset().top;
                $(document).mousemove(function (e) {
                    if (isMove) {
                        var obj = $(mainWinDiv);
                        obj.css({"left": e.pageX - div_x, "top": e.pageY - div_y});
                    }
                }).mouseup(
                    function () {
                        isMove = false;
                    });
            });
        }
    });
</script>

完整代码，复制即可使用

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>jquery实现div拖拽和蒙层</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <style type="text/css">
        .mini-modal {
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            opacity: 0.5;
            -moz-opacity: 0.5;
            filter: alpha(opacity=50);
            background: #000;
            display: block;
            z-index: 999;
        }
    </style>
</head>
<body>
<div class="mini-modal"></div>
<div id="left_bottom_div_tips_win" style="width: 200px;height: 200px;box-shadow: 1px 1px 5px 2px #999;background: #fff;position: absolute;bottom: 1%;right: 1%;">
    <div class="titleMain" style="height: 20px;background: #f2f2f2;cursor: move;">
        <div id="closeDivWin" style="position: absolute;text-align: center;width: 18px;height: 18px;box-shadow: 0px 0px 0px 1px #d9d9d9;right: 1px;cursor: pointer"
             onclick="$('#left_bottom_div_tips_win').css({'right':'0px','bottom':'0px'})"
             onmouseover="$(this).css('background','red');"
             onmouseout="$(this).css('background','')">➖
        </div>
    </div>
</div>
<script>
    $(function () {
        dragPanelMove(".titleMain", "#left_bottom_div_tips_win");

        function dragPanelMove(titleDiv, mainWinDiv) {
            $(titleDiv).mousedown(function (e) {
                var isMove = true;
                var div_x = e.pageX - $(mainWinDiv).offset().left;
                var div_y = e.pageY - $(mainWinDiv).offset().top;
                $(document).mousemove(function (e) {
                    if (isMove) {
                        var obj = $(mainWinDiv);
                        obj.css({"left": e.pageX - div_x, "top": e.pageY - div_y});
                    }
                }).mouseup(
                    function () {
                        isMove = false;
                    });
            });
        }
    });
</script>
</body>
</html>