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

【问题标题】：Angular JS resizable div directive, resize handle for resizing top and bottom divsAngular JS 可调整大小的 div 指令，调整顶部和底部 div 大小的调整句柄
【发布时间】：2016-08-24 17:09:25
【问题描述】：

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);
        }
    };
});

<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>

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

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

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

【问题讨论】：

标签： javascript jquery css angularjs resize

【解决方案1】：

试试：

event.target.parentElement.getBoundingClientRect()

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);
        }
    };
});

<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>

输出可能类似于：

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

【讨论】：