Problem with draggable and iframe

[sebpetbpm]

When I create a draggable element with an iframe in it, an error occurs when dragging. As soon as the cursor is over the iframe, dragging stops. Here is a fiddle: https://jsfiddle.net/uc21q65e

System configuration

interact.js version: 1.10.11 Browser name and version: Firefox 94 Operating System: Mac OS, Windows 10

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[taye]

I'm planning on improving iframe support soon, but I can't give an estimated time, sorry.

If you don't need users to be able to click into the iframe, you can work around this by covering the iframe element with a transparent overlay.

[andreasvirkus]

The way I solved it for now is to toggle the pointerEvents of the iframe when resize or dragging starts/ends, seems to work great

  interactable
    .resizable({
      edges: { left: true, right: true, bottom: true, top: true },
      allowFrom: resizeHandler,
      listeners: {
        move(event: any) {
          resizeX += event.deltaRect.left
          resizeY += event.deltaRect.top

          Object.assign(event.target.style, {
            width: `${event.rect.width}px`,
            height: `${event.rect.height}px`,
            transform: `translate(${Math.round(resizeX)}px, ${Math.round(resizeY)}px)`,
          })
        },
        start() {
          iframe && (iframe.style.pointerEvents = 'none')
        },
        end(event) {
          iframe && (iframe.style.pointerEvents = 'initial')
        },
      },