split-area with iframe - drag gutter issue about angular-split HOT 4 CLOSED

Hi @DHasi ,
Thanks to reporting, i've experiment what you describe.

Sadly, I don't see any easy fix to solve this, it comes from the mousemove event listener on document which is not triggered when mouse over the iframe:
https://github.com/bertrandg/angular-split/blob/master/src/split.component.ts#L274

But i've write a hack to bypass the behavior. The idea is to cover split-area with transparent div when dragging gutters to keep mousemove on document firing.

Here it is: http://plnkr.co/edit/VSQPQ6?p=preview

<split direction="horizontal" (dragStart)="showIframeHider = true" (dragEnd)="showIframeHider = false">
  <split-area [size]="30">
      <p>Lorem ipsum dolor sit amet...</p>
  </split-area>
  <split-area [size]="70">
      <div>
        <iframe src="https://bertrandg.github.io/angular-split" frameborder="0" width="100%" height="100%"></iframe>
        <div [hidden]="showIframeHider === false" class="hack-iframe-hider"></div>
      </div>
  </split-area>
</split>

split-area > div {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.hack-iframe-hider {
  background: rgba(0, 0, 0, .2);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

from angular-split.

That did the trick - thank you!

I think you can solve this problem by implementing a kind of "drag-preview". The splitter of the kendo ui framework from telerik does something similar: http://demos.telerik.com/kendo-ui/splitter/index

from angular-split.

@bertrandg , you're the man! Thanks

from angular-split.

Just noting that I accomplished the same thing by using 'pointer-events: none' around the iframe when in a dragging state.

Makes it so you do not need an extra dom element as proposed by @bertrandg

from angular-split.