iFrames, and context unrelated elements block all events, and are unusable

[AmitMY]

First of all, thanks for implementing resize, I hated using the old angular-resize package which clashed with yours.

I'm having a bug both with resize and drag, that relates to iframes: Visual description: https://youtu.be/fcDABtoVXUk

I have checked, and when you click on the PDF while dragging, there is no window blur event. There is nothing. One solution would be to once starting either drag or resize, cover the PDF with a transparent element, and remove it once resize is done. This is fine, and what I'll do for now, but if you can implement a solution in the library that would be much appreciated.

[xieziyu]

@AmitMY Thanks for reporting this issue with a detailed video. I will study the case and try to find a way. Your solution is very helpful.

[AmitMY]

Great to know. Btw, I found that if I just listen to the moveOffset events and rzStart, and cover the entire element (including the header) with a 100% width 100% height absolute transparent div, this works regardless of the content of it. Then on rzEnd and stopped events, I remove that element, the user sees nothing and it is a consistant experience.

[xieziyu]

@AmitMY I've published a new version with your solution that introduced a transparent div. It works well and I also add a demo to test that case. Thanks!

[AmitMY]

Amazing, thank you!

[rolandschuster]

Hi, there is a problem with the transparent div solution. All click or dblclick events on the original div are blocked if we have something like this: <div class="scene" ngDraggable (dblclick)="selectScene()">

Do you have a solution for this?

[AmitMY]

Hi @rolandschuster I just tried ondblclick="alert()" which does work. Can you add more specific information?

When I first implemented this solution myself, I used the started and stopped, which caused this exact problem - the first click starts the drag event. Then I changed it to moveOffset which means an actual drag is occurring. I am not sure what happens in the solution @xieziyu implemented, but that is one possibility

[rolandschuster]

I have this <div class="scene" ngDraggable (dblclick)="selectScene()"> inside my components html. I just want to drag it around with the ngDraggable Directive and run the method selectScene() on double click. This worked fine for some time with v2.0.0-beta.2. Now in v2.0.0 that dosn't work anymore because the transparent div lays in front of my div and blocks the dblclick-Event.

I tried to debug a little and found this section in the constructor of helper-block.js:

let helper = renderer.createElement('div');
renderer.setStyle(helper, 'position', 'absolute');
renderer.setStyle(helper, 'width', '100%');
renderer.setStyle(helper, 'height', '100%');
renderer.setStyle(helper, 'background-color', 'transparent');
renderer.setStyle(helper, 'top', '0');
renderer.setStyle(helper, 'left', '0');

If i add the line

renderer.setStyle(helper, 'pointer-events', 'none');

at the end of the section it works fine for my purpose.

Can you check if this would also work for the Issues described by @AmitMY? If not we need another solution for this. Maybe adding all Event-Callbacks from the original div to the transparent div?

[AmitMY]

Unfortunately, this is not a working solution. When going to the demo, add the following rule:

.iframe-resize-container > div:last-child {
    pointer-events: none;
}

And you will see how jumpy everything is.

I am so sorry I broke your code, didn't think this is going to break anything. I really want @xieziyu 's input on this, as it does seem that the layer is added on "started" and not on "moveOffset" as intended (which is the method that allows for other events while not dragging) This is evident by clicking on the draggable header, and seeing the new div in the elements tab of the developer tools, not only when moving.

Reopening.

[xieziyu]

@AmitMY @rolandschuster Sorry about that, I added the layer on started not moveOffset. I fixed this in v2.0.1

[rohandani]

Its still not working for me. Click listner not getting fired. The moment I remove ngDraggable of my div. Click listners for all buttons inside that div starts working.

[xieziyu]

@rohandani Can you provide a demo for your issue?