Как изменить размер по правой панели - PullRequest
Новая
       1

Как изменить размер по правой панели

1 голос
/ 28 января 2020

Я создаю панель с изменяемыми размерами с левой и правой панелью. На левой панели она работает нормально, но на правой панели не могу, Как это сделать?

Создаю панель с изменяемыми размерами с левой и правой панелью, на левой панели, она работает нормально, но на правой панели не могу сделать, как это сделать ??

Это мой код 

   var min = 300;
            var max = 3600;
            var mainmin = 200;
    
            $('#projectsplit-bar').mousedown(function (e) {
                e.preventDefault();
                $(document).mousemove(function (e) {
                    e.preventDefault();
                    var x = e.pageX - $('#projectsidebar').offset().left;
                    
                    if (x > min && x < max && e.pageX < ($(window).width() - mainmin)) {
                        $('#projectsidebar').css("width", x);
                        $('#projectmain').css("margin-left", x);
                    }
    
                  
    
                })
            });
    
            $('#rightsplitbar').mousedown(function (e) {
                
                e.preventDefault();
                $(document).mousemove(function (e) {
                    e.preventDefault();
                    
                    var y = e.pageX - $('#rightbar').offset().right;
                    if (y > min && y < max && e.pageX < ($(window).width() - mainmin)) {
                        $('#projectsidebar').css("width", y);
                        $('#projectmain').css("margin-right", y);
                    }
    
    
    
                })
            });
            $(document).mouseup(function (e) {
                $(document).unbind('mousemove');
            });
  <html xmlns="http://www.w3.org/1999/xhtml">
    <head><title></title>
    
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
        <style>
        @import "compass/css3";
    
    
    #projectmain {
        background-color: BurlyWood;
        margin-left: 300px;
        margin-right: 300px;
        height: 300px;
    }
    #rightbar {
        background-color: yellow;
        width: 350px;
        float: right;
        height: 300px;
    }
    
    
    #projectsidebar {
        background-color: IndianRed;
        width: 350px;
        float: left;
        height: 300px;
    }
    
    #projectsplit-bar {
        background-color:black;
        height:100%;
        float: right;
        width: 6px;
        cursor: col-resize;
    }
    
    #rightsplitbar {
        background-color:black;
        height:100%;
        float: left;
        width: 6px;
        cursor: col-resize;
    }
    </style>
    
        
    
    </head>
    <body>
    
       
    <div id="projectsidebar"> 
        <div id="projectsplit-bar"></div>
        left
    </div>
        <div id="rightbar"> 
        <div id="rightsplitbar"></div>
        rightbar
    </div>
    <div id="projectmain">main</div>
    </body>
    </html>

Ответы [ 2 ]

0 голосов
/ 28 января 2020

Попробуйте использовать приведенный ниже код. Проблема в том, что для функции смещения jQuery не существует свойства right. Есть только верхний и левый свойства. Я повернул ось X просто. 

var min = 300;
            var max = 3600;
            var mainmin = 200;
    
            $('#projectsplit-bar').mousedown(function (e) {
                e.preventDefault();
                $(document).mousemove(function (e) {
                    e.preventDefault();
                    var x = e.pageX - $('#projectsidebar').offset().left;
                    if (x > min && x < max && e.pageX < ($(window).width() - mainmin)) {
                        $('#projectsidebar').css("width", x);
                        $('#projectmain').css("margin-left", x);
                    }
                })
            });
    
            $('#rightsplitbar').mousedown(function (e) {
                
                e.preventDefault();
                $(document).mousemove(function (e) {
                    e.preventDefault();
                    var y = ($(window).width() - e.pageX) - 8;
                    if (y > min && y < max && e.pageX < ($(window).width() - mainmin)) {
                        $('#rightbar').css("width", y);
                        $('#projectmain').css("margin-right", y);
                    }
                })
            });
            $(document).mouseup(function (e) {
                $(document).unbind('mousemove');
            });
<html xmlns="http://www.w3.org/1999/xhtml">
    <head><title></title>
    
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
        <style>
        @import "compass/css3";
    
    
    #projectmain {
        background-color: BurlyWood;
        margin-left: 300px;
        margin-right: 300px;
        height: 300px;
    }
    #rightbar {
        background-color: yellow;
        width: 350px;
        float: right;
        height: 300px;
    }
    
    
    #projectsidebar {
        background-color: IndianRed;
        width: 350px;
        float: left;
        height: 300px;
    }
    
    #projectsplit-bar {
        background-color:black;
        height:100%;
        float: right;
        width: 6px;
        cursor: col-resize;
    }
    
    #rightsplitbar {
        background-color:black;
        height:100%;
        float: left;
        width: 6px;
        cursor: col-resize;
    }
    </style>
    </head>
    <body>
       
      <div id="projectsidebar"> 
          <div id="projectsplit-bar"></div>
          left
      </div>
      <div id="rightbar"> 
          <div id="rightsplitbar"></div>
          rightbar
      </div>
      <div id="projectmain">main</div>
    </body>
    </html>
0 голосов
/ 28 января 2020

Вы пытались изменить #projectsidebar на #rightbar в этом блоке? 

$('#rightsplitbar').mousedown(function (e) {

        e.preventDefault();
        $(document).mousemove(function (e) {
            e.preventDefault();

            var y = e.pageX - $('#rightbar').offset().right;
            if (y > min && y < max && e.pageX < ($(window).width() - mainmin)) {
                $('#projectsidebar').css("width", y);
                $('#projectmain').css("margin-right", y);
            }



        })
    });

следующим образом: 

$('#rightsplitbar').mousedown(function (e) {

        e.preventDefault();
        $(document).mousemove(function (e) {
            e.preventDefault();

            var y = e.pageX - $('#rightbar').offset().right;
            if (y > min && y < max && e.pageX < ($(window).width() - mainmin)) {
                $('#rightbar').css("width", y);
                $('#projectmain').css("margin-right", y);
            }



        })
    });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...