js实现鼠标拖动改变iframe，frameset大小

最新推荐文章于 2024-01-22 14:45:16 发布

某A~

最新推荐文章于 2024-01-22 14:45:16 发布

阅读量1.3k

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_37815438/article/details/97910082

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

实现拖动竖线调整左侧菜单部分的宽度

思路：点击tree和content中间这条线时记录当前鼠标位置，当鼠标抬起时再次记录位置并且重新设置tree部分的宽度。
页面组成：页面由三部分组成:top.html 一级菜单部分，tree.html 左侧菜单部分，content.html主要内容部分。最外层是一个main.html，我们要实现拖动tree和content之间线改变tree部分的宽度
具体实现：
– 要定位到这条线可以在tree.html或content.html实现，我写在content中，在content页面的最左侧写一条竖线，鼠标移入换成灰色样式+左右箭头，鼠标移出换为之前颜色,我写了一个toggle方法改变颜色。

<div class="left_bar" onmouseover="toogleColor(this)" onmouseout="toogleColor(this)">

–在这条线上鼠标点击记录当前位置，在整个body鼠标按键抬起时设置宽度。

<body onmouseup="setWidth(event)">
//div修改如下
<div class="left_bar" onmouseover="toogleColor(this)" onmouseout="toogleColor(this)" onmousedown="getCurrentMouseLocation(event)"></div>

– 这样就可以实现拖动改变宽度，但有时会失效，经过反复验证后发现，如果content页面有文字而拖动过程中恰好选中了文字，那本次的拖动改变大小可以实现，但是下一次就不能。解决方案是在鼠标点击记录好位置后设置页面元素不能被选中，等鼠标按键抬起恢复可以选中。

完整代码部分
main.html(三个带id的iframe ）

    <iframe id="top" src="top.html" style="width: calc(100% - 2px);height:80px"></iframe>
    <iframe id="tree_menu" src="tree.html" style="width: 200px;height:calc(100% - 84px)">	</iframe>
    <iframe id="content" src="content.html" style="width: calc(100% - 204px);height:calc(100% - 84px)"></iframe>

content.html


<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        .left_bar {
            margin-left: 2px;
			height:100%;width:3px;margin-right: 30px;cursor:e-resize;float:left;
        }
        html,body{
            height: 100%;
            width: 100%;
            margin: 0;
        }
    </style>
</head>

<body onmouseup="setWidth(event)">
    <div class="left_bar" onmouseover="toogleColor(this)" onmouseout="toogleColor(this)" onmousedown="getCurrentMouseLocation(event)"></div>
    content area
    <script>
    //更换颜色
    function toogleColor(e){
        e.style.backgroundColor = (e.style.backgroundColor=="")?e.style.backgroundColor="lightgrey":e.style.backgroundColor="";
    }
    //初始位置
    var x_start = 0;
    //改变标志
    var moveSwitch = false;
    //鼠标点击
    function getCurrentMouseLocation(event){
        let event = event || window.event;
        x_start = event.clientX;
        //设置需要改变宽度
        moveSwitch = true;
        //设置页面不可选中
        document.body.onselectstart=function(){return false;};
    }
//鼠标抬起设置宽度
    function setWidth(event) {
        //只有鼠标点击了拖动div后才进行一下操作
        if (moveSwitch){
            let event = event || window.event;
            let x_current = event.clientX;
            let x_location = 0;
             x_location += (x_current - x_start);
            //设置最大宽度防止右边太小变形，不需要可以去掉
            x_location = (x_location>270)?270:x_location;
            let normalWidth = top.frames["tree_menu"].style.width;
            let width = Number(normalWidth.replace('px',''));
            width+=Number(x_location);
            //获取tree所在的iframe，设置宽度
            //如果是frameset 替换为 top.frames["content"].cols = width+ ",*";
            top.frames["content"].style.width=width+'px';
            moveSwitch = false;
        }
        //恢复页面可选中
        document.body.onselectstart=function(){return true;};
    }
    </script>
</body>
</html>

某A~

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js实现鼠标拖动改变iframe，frameset大小

实现拖动竖线调整左侧菜单部分的宽度思路：点击tree和content中间这条线时记录当前鼠标位置，当鼠标抬起时再次记录位置并且重新设置tree部分的宽度。页面组成：页面由三部分组成:top.html 一级菜单部分，tree.html 左侧菜单部分，content.html主要内容部分。最外层是一个main.html，我们要实现拖动tree和content之间线改变tree部分的宽度具体...
复制链接

扫一扫