js实现拖拉改变宽度

最新推荐文章于 2024-04-06 14:56:52 发布

Z~Ya

最新推荐文章于 2024-04-06 14:56:52 发布

阅读量1.4k

点赞数

文章标签：拖拉宽度 js

本文链接：https://blog.csdn.net/qq_43639075/article/details/90259850

版权

页面有两个区域，左右都是iframe页面，现在需要实现拖动左侧宽度，右侧iframe的宽度跟着改变。
当右边iframe页面改变时，也可以拖动。

html代码：在这里插入代码片

<div class="mainContent">
    <div id="sidebar">
        <iframe id="frameContentLeft" src="leftApply0.html"></iframe>
        <div id="dragbar"></div>
    </div>
    <div id="main">
        <iframe id="frameContentRight" src="rightmain.html" onload="loadFrame(this)"></iframe>
    </div>
</div>

js代码：

        var i = 0;
        var dragging = false;
        var $main = $('#main')
        $('#dragbar').mousedown(function(e) {
            e.preventDefault();
            dragging = true;
            $("#ghostbar").remove();
            var ghostbar = $('<div>', {
                id: 'ghostbar',
                css: {
                    height: $main.outerHeight(),
                    top: $main.offset().top,
                    left: $main.offset().left
                }
            }).appendTo('body');
            $('#mousestatus').html("mousedown" + i++);
            $(document).mousemove(function(e) {
                ghostbar.css("left", e.pageX + 2);
            });
            // 此处新增，当鼠标在iframe中时也会移动
            $("#frameContentLeft").contents().mousemove(function(e) {
                ghostbar.css("left", e.pageX + 2);
            });
            $("#frameContentRight").contents().mousemove(function(e) {
                ghostbar.css("left", e.pageX + $main.offset().left + $("#dragbar").width() * 2);
            });
        });
        $(document).mouseup(function(e) {

            $('#clickevent').html('in another mouseUp event' + i++);

            if (dragging) {

                $('#sidebar').css("width", e.pageX + 2);
                $('#frameContentLeft').css("width", e.pageX );

                $main.css("left", e.pageX + 2);

                $('#ghostbar').remove();

                $(document).unbind('mousemove');

                // 此处新增，解绑时将myiframe也接触

                $("#frameContentRight").contents().unbind('mousemove');
                $("#frameContentLeft").contents().unbind('mousemove');

                dragging = false;

            }

        });
        // 新增 myiframe的mouseup事件
        $("#frameContentLeft").contents().mouseup(function(e) {

            if (dragging) {

                $('#sidebar').css("width", e.pageX + 2);
                $('#frameContentLeft').css("width", e.pageX );
                $main.css("left", e.pageX + 2);
                $('#ghostbar').remove();

                $(document).unbind('mousemove');

                // 此处新增，解绑时将myiframe也接触

                $("#frameContentLeft").contents().unbind('mousemove');
                $("#frameContentRight").contents().unbind('mousemove');

                dragging = false;

            }

        });
        $("#frameContentRight").contents().mouseup(function(e) {
            if (dragging) {

                $('#sidebar').css("width", e.pageX + $main.offset().left + $("#dragbar").width());
                $('#frameContentLeft').css("width", e.pageX + $main.offset().left + $("#dragbar").width()-3);

                $main.css("left", e.pageX + $main.offset().left + $("#dragbar").width());

                $('#ghostbar').remove();

                $(document).unbind('mousemove');

                // 此处新增，解绑时将myiframe也接触

                $("#frameContentLeft").contents().unbind('mousemove');
                $("#frameContentRight").contents().unbind('mousemove');

                dragging = false;

            }

        });

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title></title>
    <style type='text/css'>

        body,html{width:100%;height:100%;padding:0;margin:0;}

        #main{
            float: right;
            position: absolute;
            height:100%;
            right: 0;
            left:200px;
            width: 100%;
        }

        #sidebar{
            width:200px;

            float: left;

            position: absolute;

            height:100%;

            overflow-y: hidden;

        }

        #dragbar{
            background-color:#3c99fd;
            height:100%;
            float: right;
            width: 2px;
            cursor: col-resize;
        }

        #ghostbar{

            width:3px;

            background-color:#000;

            opacity:0.5;

            position:absolute;

            cursor: col-resize;

            z-index:999
        }
        body {
            margin: 0;
            padding: 0;
            border: 0;
            overflow: hidden;
            height: 100%;
            max-height: 100%;
        }

        .mainContent {
            position: absolute;
            width: 100%;
            top: 0;
            bottom: 0;
        }

        #frameContentLeft {
            height: 100%;
            width: 197px;
            vertical-align: top;
            border: none;
            float: left;
        }

        #frameContentRight {
            height: 100%;
            width: 100%;
            border: none;
            float: left;
        }

    </style>

</head>

<body>
<div class="mainContent">
    <div id="sidebar">
        <iframe id="frameContentLeft" src="saa.html"></iframe>
        <div id="dragbar"></div>
    </div>
    <div id="main">
        <iframe id="frameContentRight" src="lll.html" onload="loadFrame(this)"></iframe>
    </div>
</div>

</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
        var i = 0;
        var dragging = false;
        var $main = $('#main')
        $('#dragbar').mousedown(function(e) {
            e.preventDefault();
            dragging = true;
            $("#ghostbar").remove();
            var ghostbar = $('<div>', {
                id: 'ghostbar',
                css: {
                    height: $main.outerHeight(),
                    top: $main.offset().top,
                    left: $main.offset().left
                }
            }).appendTo('body');
            $('#mousestatus').html("mousedown" + i++);
            $(document).mousemove(function(e) {
                ghostbar.css("left", e.pageX + 2);
            });
            // 此处新增，当鼠标在iframe中时也会移动
            $("#frameContentLeft").contents().mousemove(function(e) {
                ghostbar.css("left", e.pageX + 2);
            });
            $("#frameContentRight").contents().mousemove(function(e) {
                ghostbar.css("left", e.pageX + $main.offset().left + $("#dragbar").width() * 2);
            });
        });
        $(document).mouseup(function(e) {

            $('#clickevent').html('in another mouseUp event' + i++);

            if (dragging) {

                $('#sidebar').css("width", e.pageX + 2);
                $('#frameContentLeft').css("width", e.pageX );

                $main.css("left", e.pageX + 2);

                $('#ghostbar').remove();

                $(document).unbind('mousemove');

                // 此处新增，解绑时将myiframe也接触

                $("#frameContentRight").contents().unbind('mousemove');
                $("#frameContentLeft").contents().unbind('mousemove');

                dragging = false;

            }

        });
        // 新增 myiframe的mouseup事件
        $("#frameContentLeft").contents().mouseup(function(e) {

            if (dragging) {

                $('#sidebar').css("width", e.pageX + 2);
                $('#frameContentLeft').css("width", e.pageX );
                $main.css("left", e.pageX + 2);
                $('#ghostbar').remove();

                $(document).unbind('mousemove');

                // 此处新增，解绑时将myiframe也接触

                $("#frameContentLeft").contents().unbind('mousemove');
                $("#frameContentRight").contents().unbind('mousemove');

                dragging = false;

            }

        });
        $("#frameContentRight").contents().mouseup(function(e) {
            if (dragging) {

                $('#sidebar').css("width", e.pageX + $main.offset().left + $("#dragbar").width());
                $('#frameContentLeft').css("width", e.pageX + $main.offset().left + $("#dragbar").width()-3);

                $main.css("left", e.pageX + $main.offset().left + $("#dragbar").width());

                $('#ghostbar').remove();

                $(document).unbind('mousemove');

                // 此处新增，解绑时将myiframe也接触

                $("#frameContentLeft").contents().unbind('mousemove');
                $("#frameContentRight").contents().unbind('mousemove');

                dragging = false;

            }

        });

    function loadFrame(obj) {
        var $main = $('#main')
        $(document).mouseup(function(e) {

            $('#clickevent').html('in another mouseUp event' + i++);

            if (dragging) {

                $('#sidebar').css("width", e.pageX + 2);
                $('#frameContentLeft').css("width", e.pageX );

                $main.css("left", e.pageX + 2);

                $('#ghostbar').remove();

                $(document).unbind('mousemove');

                // 此处新增，解绑时将myiframe也接触

                $("#frameContentRight").contents().unbind('mousemove');
                $("#frameContentLeft").contents().unbind('mousemove');

                dragging = false;

            }

        });
        $("#frameContentLeft").contents().mouseup(function(e) {

            if (dragging) {

                $('#sidebar').css("width", e.pageX + 2);
                $('#frameContentLeft').css("width", e.pageX );
                $main.css("left", e.pageX + 2);
                $('#ghostbar').remove();

                $(document).unbind('mousemove');

                // 此处新增，解绑时将myiframe也接触

                $("#frameContentLeft").contents().unbind('mousemove');
                $("#frameContentRight").contents().unbind('mousemove');

                dragging = false;

            }

        });
        $("#frameContentRight").contents().mouseup(function(e) {
            if (dragging) {

                $('#sidebar').css("width", e.pageX + $main.offset().left + $("#dragbar").width());
                $('#frameContentLeft').css("width", e.pageX + $main.offset().left + $("#dragbar").width()-3);

                $main.css("left", e.pageX + $main.offset().left + $("#dragbar").width());

                $('#ghostbar').remove();

                $(document).unbind('mousemove');

                // 此处新增，解绑时将myiframe也接触

                $("#frameContentLeft").contents().unbind('mousemove');
                $("#frameContentRight").contents().unbind('mousemove');

                dragging = false;

            }

        });
    }

</script>
</html>

Z~Ya

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现拖拉改变宽度

页面有两个区域，左右都是iframe页面，现在需要实现拖动左侧宽度，右侧iframe的宽度跟着改变。html代码：在这里插入代码片<div class="mainContent"> <div id="sidebar"> <iframe id="frameContentLeft" src="leftApply0.html"></i...
复制链接

扫一扫