Angular JS可调整大小的div指令，调整大小句柄以调整顶部和底部div的大小

Question

＆＃13;

＆＃13;

angular.module('workspaceApp', [])
.directive('resizer', function($document) {

    return function($scope, $element, $attrs) {
        $element.on('mousedown', function(event) {
            console.log('mousedown')
            event.preventDefault();

            $document.on('mousemove', mousemove);
            $document.on('mouseup', mouseup);
        });

        function mousemove(event) {
                // Handle horizontal resizer
                var y = event.pageY
                var parentHeight = $element.parent().height();
                // top container
                $element.prev().css({
                    height: (y - parseInt($attrs.resizerPos)) + 'px'
                });
                // bottom container
                $element.next().css({
                    height: parentHeight - $element.prev().height() - 6 + 'px'
                });
        }

        function mouseup() {
            $document.unbind('mousemove', mousemove);
            $document.unbind('mouseup', mouseup);
        }
    };
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div class="main-container" ng-app="workspaceApp">
      <div class="panel-body-1">
           <div style="background: green;" class="top-container">a</div>
           <div class="resize-handler" resizer resizer-pos="130"><hr></div>
           <div style="background: lime;" class="bottom-container">b</div>
      <div>
      <div class="panel-body-2">
           <div style="background: blue;" class="top-container">c</div>
           <div class="resize-handler" resizer resizer-pos="250"><hr></div>
           <div style="background: cyan;" class="bottom-container">d</div>
      <div>
</div>

＆＃13;

＆＃13;

＆＃13;

   panel-body-1    
    ----------------
    |     top      |
    |--------------|
    |--------------| --> draggable bar in middle
    |     bottom   |
    |              |
    ----------------

   panel-body-2    
    ----------------
    |     top      |
    |--------------|
    |--------------| --> draggable bar in middle
    |     bottom   |
    |              |
    ----------------

  

我正在尝试调整顶部和底部容器的高度   移动resize处理程序。但是因为event.PageY的不同之处不同   决议，我无法找到应用高度的最佳逻辑   在调整时。       任何帮助表示赞赏

Answer 1

尝试：

event.target.parentElement.getBoundingClientRect()

＆＃13;

＆＃13;

angular.module('workspaceApp', [])
.directive('resizer', function($document) {

    return function($scope, $element, $attrs) {
        $element.on('mousedown', function(event) {
            console.log('mousedown')
            event.preventDefault();

            $document.on('mousemove', mousemove);
            $document.on('mouseup', mouseup);
        });

        function mousemove(event) {
                // Handle horizontal resizer
                var y = event.pageY
                var parentHeight = event.target.parentElement.getBoundingClientRect()
                console.log(event.target.parentElement.getBoundingClientRect())
                // top container
                $element.prev().css({
                    height: (y - parseInt($attrs.resizerPos)) + 'px'
                });
                // bottom container
                $element.next().css({
                    height: parentHeight - $element.prev().height() - 6 + 'px'
                });
        }

        function mouseup() {
            $document.unbind('mousemove', mousemove);
            $document.unbind('mouseup', mouseup);
        }
    };
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div class="main-container" ng-app="workspaceApp">
      <div class="panel-body-1">
           <div style="background: green;" class="top-container">a</div>
           <div class="resize-handler" resizer resizer-pos="130"><hr></div>
           <div style="background: lime;" class="bottom-container">b</div>
      <div>
      <div class="panel-body-2">
           <div style="background: blue;" class="top-container">c</div>
           <div class="resize-handler" resizer resizer-pos="250"><hr></div>
           <div style="background: cyan;" class="bottom-container">d</div>
      <div>
</div>

＆＃13;

＆＃13;

＆＃13;

输出可能类似于：

ClientRect {top: 4.6666669845581055, right: 637.3333740234375, bottom: 118, left: 0, width: 637.3333740234375…}