Draggable iframe outside iframe

Open

#542 opened on Feb 17, 2021 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty: 5/5
Estimated time: Over a week
Newbie friendliness: 20/100

Issue type: Bug
Clarity: Needs clarification
Activity status: Stale
Tech stack: javascript, react
Domain: frontend

Research direction

The issue provides a React example using react-draggable 4.4.3 and an iframe, but names no repository file, entry point, or test. Start by reproducing the reported drag behavior with the supplied example and inspect how iframe event boundaries affect dragging. Done would require a confirmed fix or a clearly documented limitation.

Written by the indexing model from the issue text.

Description

Hello i have a problem.
I have an iframe inside it has its own life (its own interface).

Since "bubbling events" stops at the top level inside the iframe, holding on to the iframe I can't drag it.

what can you advise me ?


 <Draggable bounds="body">
        <div className={styles.container}>
          <div className={styles.videoCallContainer} ref={rootRef}>
            {isIFrameLoaded && (
              <iframe src...>
              // etc
            )}
          </div>
        </div>
      </Draggable>

If at least one element is on top of an iframe then I can grab and drag it, but then it overlaps the interface inside the iframe itself.

I tried adding

on top of the iframe and giving this div the styles

  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  border: 1px dashed tomato;

But it doesn't help. The behavior is the same as without the div

dependencies:
"react-draggable": "4.4.3",
"react": "16.10.2",
"react-dom": "16.10.2"

Thanks

Dominant language: JavaScript
Stars: 9.3k
Forks: 1k
Avg merge: 3d 8h
Merged PRs (30d): 4

Contributor guide

No contributing guide indexed for this repository

First steps

Read the whole issue, then the project's contributing guide.
Comment on the issue to say you are picking it up — it saves two people doing the same work.
Fork the repository and make your change on a branch.
Open a pull request that references the issue number.

Similar issues

[Duplicate Code] Repeated filtered model-alias assembly in proxy server Open

code-quality refactoring

Difficulty 2/5 1-3 hours Newbie friendliness 84/100

github/gh-aw-firewall#8816 · Opened Sep 20, 2026
quickjs: support `timeout=None` (no per-call deadline) in `CodeInterpreterMiddleware` Open

integration:quickjs org:external priority:backlog topic:code-interpreter topic:middleware type:feature

Difficulty 2/5 1-3 hours Newbie friendliness 74/100

langchain-ai/deepagents#6450 · Opened Sep 20, 2026
[optimization:agents-md-curator] AGENTS.md: compress duplicated Debugging & Logging section and merge redundant autopilot rules Open

optimization optimization:agents-md-curator

Difficulty 2/5 1-3 hours Newbie friendliness 86/100

githubnext/gh-aw-cao#13143 · Opened Sep 20, 2026
[BUG] schema-compat/zodToJsonSchema: nullable zod v4 enum/literal widens to type:[X,"null"] but keeps enum/const, so exported schema rejects null Open

status: needs triage

Difficulty 2/5 1-3 hours Newbie friendliness 88/100

mastra-ai/mastra#24516 · 2 comments · Opened Sep 20, 2026
Kubernetes request flow diagram 404s on both copies of the tutorial Open

Difficulty 2/5 1-3 hours Newbie friendliness 88/100

layer5io/docs#1263 · Opened Sep 20, 2026

More JavaScript issues