html可拖拽放大缩小

> 废话少说直接上代码直接运行即可：

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<div class="drag-wrap" style="top:20vh;left:29vw">
    <div class="dw-header">
        <p class="dw-h-title" onselectstart="return false">标题2</p>
        <div class="dw-h-operator">
            <button type="button" class="dw-h-o-fullscreen"><></button>
            <button type="button" class="dw-h-o-normalscreen">><</button>
            <button type="button" class="dw-h-o-close">X</button>
        </div>
    </div>
    <div class="dw-body">
        <p>测试2</p>
    </div>
    <div class="dw-footer">
        <button type="button" class="dw-f-yes">确定</button>
        <button type="button" class="dw-f-no">取消</button>
    </div>
    <span class="dw-resize"></span>
</div>

</body>
</html>
<style type="text/css">
    body {
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

.dw-h-title {
        margin: 0;
        display: inline-block;
        width: calc(100% - 95px);
        padding: 10px;
        cursor: move;
    }

.drag-wrap {
        width: 40vw;
        height: 60vh;
        background-color: white;
        box-shadow: 1px 1px 6px rgba(0, 0, 0, .2);
        position: absolute;
        z-index: 20;
        border-radius: 2px;
    }

.dw-h-operator {
        position: absolute;
        right: 10px;
        display: inline;
        padding: 10px 0;
    }

.dw-header {
        display: flex;
        background-color: #F8F8F8;
    }

.dw-body {
        /* height: calc(100% - 179px); */
        height: calc(100% - 97px);
        padding: 8px;
        background-color: #eee;
        overflow: hidden;
    }

.dw-footer {
        display: flex;
        padding: 8px;
    }

.dw-f-yes {
        color: #FFF;
        background-color: #1E9FFF;
        padding: 4px 15px;
        border: 0;
        cursor: pointer;
        position: absolute;
        right: 73px;
    }

.dw-f-yes:hover {
        color: #6698FF;
        background-color: transparent;
        border: 1px solid #6698FF;
        padding: 3px 14px;
    }

.dw-f-no {
        color: #FFF;
        background-color: rgba(0, 0, 0, .2);
        padding: 4px 15px;
        border: 0;
        cursor: pointer;
        position: absolute;
        right: 10px;
    }

.dw-f-no:hover {
        color: rgba(0, 0, 0, .3);
        background-color: transparent;
        border: 1px solid rgba(0, 0, 0, .3);
        padding: 3px 14px;
    }

.dw-resize {
        cursor: se-resize;
        position: absolute;
        right: -2px;
        bottom: -2px;
        height: 10px;
        width: 10px;
    }

.dw-h-o-fullscreen, .dw-h-o-normalscreen, .dw-h-o-close {
        background-color: transparent;
        border: 0;
        cursor: pointer;
    }

.dw-h-o-close:hover {
        color: red;
    }

.dw-h-o-fullscreen:hover, .dw-h-o-normalscreen:hover {
        color: #3280fc;
    }

.dw-h-o-fullscreen {
        right: 40px;
    }

.dw-h-o-normalscreen {
        display: none;
    }
</style>
<script src="https://blog.shyngo.cn/plugins/jquery/jquery-3.6.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(function () {
//移动窗口，并置顶窗口 [显示红框]
//         $(".drag-wrap .dw-h-title").bind("mousedown", function (e1) {
//             var _this = $(this).parents(".drag-wrap");
//             var oldpageX = e1.pageX;
//             var oldpageY = e1.pageY;
//             var oldLeft = parseInt(_this.css("left"));
//             var oldTop = parseInt(_this.css("top"));
//             var _clone = _this.clone().empty().css({
//                 "border": "1px solid red",
//                 "background": "transparent",
//             }).appendTo(_this.parent());
//             setMoveItemToppest(_clone); //置顶
//             $(document).bind("mousemove.drag-wrap", function (e2) {
//                 _clone.css("left", e2.pageX - oldpageX + oldLeft + "px");
//                 _clone.css("top", e2.pageY - oldpageY + oldTop + "px");
//             });
//             $(document).bind("mouseup.drag-wrap", function (e2) {
//                 setMoveItemToppest(_this); //置顶
//                 _this.css("left", parseInt(_clone.css("left")));
//                 _this.css("top", parseInt(_clone.css("top")));
//                 _clone.remove();
//                 $(document).unbind("mousemove.drag-wrap");
//                 $(document).unbind("mouseup.drag-wrap");
//             });
//         });

//移动窗口，并置顶窗口 [不显示红框，直接移动] [使用方法：取消这个注释，然后注释上面那个]
        $(".drag-wrap .dw-h-title").bind("mousedown", function (e1) {
            var _this = $(this).parents(".drag-wrap");
            var oldpageX = e1.pageX;
            var oldpageY = e1.pageY;
            var oldLeft = parseInt(_this.css("left"));
            var oldTop = parseInt(_this.css("top"));
            setMoveItemToppest(_this); //置顶
            $(document).bind("mousemove.drag-wrap", function (e2) {
                _this.css("left", e2.pageX - oldpageX + oldLeft + "px");
                _this.css("top", e2.pageY - oldpageY + oldTop + "px");
            });
            $(document).bind("mouseup.drag-wrap", function (e2) {
                $(document).unbind("mousemove.drag-wrap");
                $(document).unbind("mouseup.drag-wrap");
            });
        });

//点击时置顶
        $(".drag-wrap").bind("click", function () {
            setMoveItemToppest($(this));
        });

//置顶窗口方法
        function setMoveItemToppest(_this) {
            function sortNumber(a, b) {
                return a - b;
            }

var zIndexArr = [];
            $(document).find(".drag-wrap").each(function () {
                zIndexArr.push(parseInt($(this).css("z-index")));
            });
            zIndexArr.sort(sortNumber);
            _this.css("z-index", zIndexArr[zIndexArr.length - 1] + 1);
        }

//右下角改变窗口大小
        $(".drag-wrap .dw-resize").bind("mousedown", function (e1) {
            var _this = $(this).parents(".drag-wrap");
            var oldpageX = e1.pageX;
            var oldpageY = e1.pageY;
            var oldWidth = parseInt(_this.css("width"));
            var oldHeight = parseInt(_this.css("height"));
            $(document).bind("mousemove.drag-wrap", function (e2) {
                if ((e2.pageX - oldpageX + oldWidth) > 150 && (e2.pageY - oldpageY + oldHeight) > 150) {
                    _this.css("width", e2.pageX - oldpageX + oldWidth + "px");
                    _this.css("height", e2.pageY - oldpageY + oldHeight + "px");
// _this.children(".dw-body").css("height", "calc(100% - 95px)");
                }
            });
            $(document).bind("mouseup.drag-wrap", function (e2) {
                $(document).unbind("mousemove.drag-wrap");
                $(document).unbind("mouseup.drag-wrap");
            });
        });

//关闭按钮
        $(".drag-wrap .dw-h-o-close").click(function () {
            $(this).parents(".dw-header").parent().remove();
        });

//取消按钮
        $(".drag-wrap .dw-f-no").click(function () {
            $(this).parents(".dw-footer").parent().remove();
        });

//全屏按钮
        $(".dw-h-o-fullscreen").click(function (e) {
            $(this).hide();
            $(this).siblings(".dw-h-o-normalscreen").attr("css-data", $(this).parents(".dw-header").parent().attr("style"));
            $(this).parents(".dw-header").parent().css({
                "left": "0",
                "top": "0",
                "height": "100%",
                "width": "100%",
            });
// $(this).parents(".drag-wrap").children(".dw-body").css("height", "calc(100% - 95px)");
            $(this).siblings(".dw-h-o-normalscreen").show();
        });

//还原按钮
        $(".dw-h-o-normalscreen").click(function () {
            $(this).parents(".dw-header").parent().attr("style", $(this).attr("css-data"));
            $(this).hide();
            $(this).siblings(".dw-h-o-fullscreen").show();
        });
    });
</script>
```

相关推荐

近期文章