SortableJS/Sortable

Cannot drop over iframe (not into - but absolutely on top of an iframe)

Open

#1,388 opened on Nov 14, 2018

View on GitHub
 (8 comments) (1 reaction) (0 assignees)JavaScript (30,389 stars) (3,731 forks)batch import
bughelp wanted

Description

Hey guys, I ran into a really weird bug in Chrome when you are sorting OVER an iframe via absolute positioned containers. You can start drag just fine but the dropzone is somehow "under" the iframe even though z-index is clearly in order.

See the following pen for example:

https://codepen.io/dolbex/pen/WYpPMq

Contributor guide

Tech stack
javascript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
basic knowledge of CSS z indexunderstanding of drag and drop eventsfamiliarity with iframe behavior
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
Investigate the issue by examining how Sortable handles drag events over iframes. The bug report indicates that the drop zone appears beneath the iframe despite correct z index, likely due to iframe capturing pointer events. Check the source code in the 'src' directory for event handling, especially dragenter, dragover, and drop handlers. Compare behavior across browsers; the issue is Chrome specific. Consider if a workaround like temporarily disabling pointer events on the iframe during drag could be explored. Also review existing comments for any attempted solutions.