Splitter does not work with <iframe> or <object>

Question

I have a splitter by flexbox that works quite well (plunker): users could drag the splitter easily, even though it is very thin. And the movement of the splitter is quite smooth without jumping. Additionally, the code is light.

However, it has trouble with <iframe> or <object> (a new plunker with a iframe). When we drag the part of the splitter near the iframe quickly to the right, we will see the mouse is not <-> anymore, but becomes a normal mouse icon over the iframe.

I added console.log(e.pageX) in script.js. It shows that for the above case, this number does not update well. So does anyone have an alternative for that?

Otherwise, does anyone have a global solution for my splitter?

Splitters are everywhere, but it is hard to find a complete solution of a splitter that is thin and smooth to drag... Does anyone have any suggestion?

PS: Chrome version: Version 57.0.2987.110 (64-bit); macOS Sierra 10.12.3

Answer 1

I have found this thread and this answer, which is a light solution. I have assigned an id myiframe to the frame, and added in mousedown:

$('#myiframe').css('pointer-events', 'none');

then in mouseup:

$('#myiframe').css('pointer-events', 'all');

And here is a working plunker.