Angular Resizable and Draggable div

Question

I have a div with a background image inside which I have inserted two divs that can be moved and resized within the main div using the angular2-draggable component (https://www.npmjs.com/package/angular2-draggable):

<div class="bound-box" #myBounds [ngStyle]="{'background-image': 'url(' + mainImageUrl + ')', 'background-size': 'cover','height' : ''+maxHeight+'px','width' : ''+maxWidth+'px'  }">
    <div ngResizable ngDraggable
         [inBounds]="true"
         [bounds]="myBounds"
         rzContain siment="parent"
         rzHandles="all"
         class="resizable-widget logo"
         [position]="{x: logoPositionX, y:logoPositionY}"
         [ngStyle]="{'height' : ''+logoHeight+'px','width' : ''+logoWidth+'px'}">
      <p class="widget-header">Logo</p>
    </div>

    <div ngResizable ngDraggable
         [inBounds]="true"
         [bounds]="myBounds"
         rzContainment="parent"
         rzHandles="all"
         class="resizable-widget block"
         [position]="{x: blockPositionX, y:blockPositionY}"
         [ngStyle]="{'height' : ''+blockHeight+'px','width' : ''+blockWidth+'px'}">
      <p class="widget-header">{{block.text}}</p>
    </div>
  </div>

I have two problems:

1- when I resize the first block the one below it moves

2- if I try to resize the block from the top margin (pulling up) the block expands at the bottom.

Here is a video in which I briefly show the two errors: https://www.awesomescreenshot.com/video/21081166?key=1c81cfdbaf8f38774f839ed61e33e8eb

how can I solve it?

Answer 1

To solve the reverse resizing problem, I changed the div with the resizable-widget class to position:absolute, so it now resizes from the correct side.

Instead for moving the blocks, I did it this way:

<div class="bound-box" #myBounds [ngStyle]="{'background-image': 'url(' + mainImageUrl + ')', 'background-size': 'cover','height' : ''+maxHeight+'px','width' : ''+maxWidth+'px', 'position':'absolute', 'z-index': 1  }">
  <div ngResizable ngDraggable
     [inBounds]="true"
     [bounds]="myBounds"
     rzContain siment="parent"
     rzHandles="all"
     class="resizable-widget logo"
     [position]="{x: logoPositionX, y:logoPositionY}"
     [ngStyle]="{'height' : ''+logoHeight+'px','width' : ''+logoWidth+'px', 'position' : 'absolute'}">
    <p class="widget-header">Logo</p>
  </div>
</div>
<div class="bound-box" #myBounds [ngStyle]="{'height' : ''+maxHeight+'px','width' : ''+maxWidth+'px', 'position':'absolute', 'z-index': 2  }">
  <div ngResizable ngDraggable
     [inBounds]="true"
     [bounds]="myBounds"
     rzContainment="parent"
     rzHandles="all"
     class="resizable-widget block"
     [position]="{x: blockPositionX, y:blockPositionY}"
     [ngStyle]="{'height' : ''+blockHeight+'px','width' : ''+blockWidth+'px', 'position' : 'absolute'}">
    <p class="widget-header">{{block.text}}</p>
  </div>
</div>

by placing div with class bound-box in position:absolute and giving them different z-index. Then the user with a selector goes and chooses the block he wants to change by increasing the z-index