1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < title > Custom Mouse-Based Cross-Frame Drag Test (Fixed with Overlay)</ title >
6+ < style >
7+ body { font-family : Arial, sans-serif; margin : 40px ; background : # f0f0f0 ; position : relative; }
8+ # source {
9+ width : 150px ; height : 150px ; background : lightblue;
10+ text-align : center; line-height : 150px ; font-size : 20px ;
11+ cursor : pointer; user-select : none; position : absolute; top : 50px ; left : 50px ;
12+ z-index : 10 ;
13+ }
14+ # iframe-container { position : relative; display : inline-block; margin-top : 250px ; }
15+ iframe { width : 800px ; height : 500px ; border : 3px solid # 333 ; background : white; }
16+ # overlay {
17+ position : absolute; top : 0 ; left : 0 ; width : 100% ; height : 100% ;
18+ background : transparent; z-index : 20 ; display : none; cursor : default;
19+ }
20+ # target {
21+ width : 400px ; height : 300px ; background : lightgreen;
22+ margin : 100px auto; text-align : center; line-height : 300px ; font-size : 28px ;
23+ border : 4px dashed # 000 ;
24+ }
25+ </ style >
26+ </ head >
27+ < body >
28+
29+ < h2 > Click & hold blue box (outside), drag ANYWHERE (including into green area inside iframe), release → drops!</ h2 >
30+
31+ <!-- Source outside iframe -->
32+ < div id ="source "> Drag Me!< br > (outside iframe)</ div >
33+
34+ <!-- Iframe wrapper with overlay -->
35+ < div id ="iframe-container ">
36+ < iframe id ="previewFrame " srcdoc ="
37+ <html>
38+ <head>
39+ <style>
40+ body { margin: 0; background: #fff; }
41+ #target { width: 400px; height: 300px; background: lightgreen; margin: 100px auto; text-align: center; line-height: 300px; font-size: 28px; border: 4px dashed #000; }
42+ </style>
43+ <script>
44+ window.addEventListener('message', function(e) {
45+ if (e.data.action === 'drop') {
46+ const target = document.getElementById('target');
47+ const droppedBox = document.createElement('div');
48+ droppedBox.innerHTML = 'Dropped Successfully!<br><br>Box from outside!';
49+ droppedBox.style.cssText = 'width: 150px; height: 150px; background: lightblue; margin: 20px auto; line-height: 150px; font-size: 20px; text-align: center;';
50+ target.innerHTML = '';
51+ target.appendChild(droppedBox);
52+ }
53+ });
54+ </script>
55+ </head>
56+ <body>
57+ <div id='target'>Drop Here<br>(inside iframe)</div>
58+ </body>
59+ </html>
60+ "> </ iframe >
61+ < div id ="overlay "> </ div >
62+ </ div >
63+
64+ < script >
65+ let dragging = false ;
66+ const source = document . getElementById ( 'source' ) ;
67+ const overlay = document . getElementById ( 'overlay' ) ;
68+ const iframe = document . getElementById ( 'previewFrame' ) ;
69+
70+ // Start drag: show overlay to capture events over iframe
71+ source . addEventListener ( 'mousedown' , ( e ) => {
72+ dragging = true ;
73+ overlay . style . display = 'block' ;
74+ e . preventDefault ( ) ;
75+ } ) ;
76+
77+ // End drag: hide overlay, hide source, send drop to iframe
78+ const endDrag = ( ) => {
79+ if ( dragging ) {
80+ dragging = false ;
81+ overlay . style . display = 'none' ;
82+ source . style . display = 'none' ;
83+
84+ iframe . contentWindow . postMessage ( {
85+ action : 'drop'
86+ } , '*' ) ;
87+ }
88+ } ;
89+
90+ // Mouseup anywhere in parent (including overlay)
91+ document . addEventListener ( 'mouseup' , endDrag ) ;
92+ </ script >
93+
94+ </ body >
95+ </ html >
0 commit comments