Angular File Download Nested DropZones

Question

Using this Angular library Uploading files I am trying to create nested descriptors, but have encountered a problem with dragleave events.

<div class="full-area">
  <div class="outer-dropzone">
    <ol>
      <li>
        <div class="container">
          <div class="drop-zone-inner"></div>
          <div class="align"> </div> 
          <div class="align"> </div>
        </div>
      </li>
    </ol>
  </div>
</div>

What I want to achieve is something like the following:

When dragging and dropping into the browser window -terzone-dropzone changes css (e.g. yellow background color).

If you drag the .drop-zone-inner region, it returns the .outer-dropzone region, and then changes the drop-zone-inner zone to a new css background.

Thirdly, if you leave the .drop-zone-inner region, it will reapply the crows-dropzone css change.

, , , .drop-zone-inner (, ..). , drop-zone .

, , .

: - Dropboxs dropzone highlights