角JS可調整大小的div指令，調整手柄調整頂部和底部的div

Question

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在不同的 分辨率下有所不同，因此我無法找到調整時應用高程 的最佳邏輯。 任何幫助表示讚賞

Answer 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…}