diff --git a/app/react-native/src/server/index.html.js b/app/react-native/src/server/index.html.js
index 1ab3ca5d59ba..e3bc622c4e2f 100644
--- a/app/react-native/src/server/index.html.js
+++ b/app/react-native/src/server/index.html.js
@@ -9,15 +9,6 @@ export default function(publicPath, options) {
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Storybook for React</title>
         <style>
-          /*
-            When resizing panels, the drag event breaks if the cursor
-            moves over the iframe. Add the 'dragging' class to the body
-            at drag start and remove it when the drag ends.
-           */
-          .dragging iframe {
-            pointer-events: none;
-          }
-
           /* Styling the fuzzy search box placeholders */
           .searchBox::-webkit-input-placeholder { /* Chrome/Opera/Safari */
             color: #ddd;
diff --git a/app/react/src/server/index.html.js b/app/react/src/server/index.html.js
index dc5b0afc42b8..425b53601cfa 100644
--- a/app/react/src/server/index.html.js
+++ b/app/react/src/server/index.html.js
@@ -40,15 +40,6 @@ export default function({ assets, publicPath, headHtml }) {
         <meta content="IE=edge" http-equiv="X-UA-Compatible" />
         <title>Storybook</title>
         <style>
-          /*
-            When resizing panels, the drag event breaks if the cursor
-            moves over the iframe. Add the 'dragging' class to the body
-            at drag start and remove it when the drag ends.
-           */
-          .dragging iframe {
-            pointer-events: none;
-          }
-
           /* Styling the fuzzy search box placeholders */
           .searchBox::-webkit-input-placeholder { /* Chrome/Opera/Safari */
             color: #ddd;
diff --git a/app/vue/src/server/index.html.js b/app/vue/src/server/index.html.js
index dc5b0afc42b8..425b53601cfa 100644
--- a/app/vue/src/server/index.html.js
+++ b/app/vue/src/server/index.html.js
@@ -40,15 +40,6 @@ export default function({ assets, publicPath, headHtml }) {
         <meta content="IE=edge" http-equiv="X-UA-Compatible" />
         <title>Storybook</title>
         <style>
-          /*
-            When resizing panels, the drag event breaks if the cursor
-            moves over the iframe. Add the 'dragging' class to the body
-            at drag start and remove it when the drag ends.
-           */
-          .dragging iframe {
-            pointer-events: none;
-          }
-
           /* Styling the fuzzy search box placeholders */
           .searchBox::-webkit-input-placeholder { /* Chrome/Opera/Safari */
             color: #ddd;
diff --git a/lib/ui/src/modules/ui/components/layout/index.js b/lib/ui/src/modules/ui/components/layout/index.js
index 22ae8b54b570..593fed01ee53 100755
--- a/lib/ui/src/modules/ui/components/layout/index.js
+++ b/lib/ui/src/modules/ui/components/layout/index.js
@@ -1,4 +1,4 @@
-import { document, localStorage, window } from 'global';
+import { localStorage, window } from 'global';
 import PropTypes from 'prop-types';
 import React from 'react';
 import SplitPane from 'react-split-pane';
@@ -78,6 +78,15 @@ const fullScreenPreviewStyle = {
   overflow: 'hidden',
 };
 
+const overlayStyle = isDragging => ({
+  display: isDragging ? 'block' : 'none',
+  position: 'absolute',
+  top: '0px',
+  right: '0px',
+  bottom: '0px',
+  left: '0px',
+});
+
 const defaultSizes = {
   addonPanel: {
     down: 200,
@@ -89,10 +98,6 @@ const defaultSizes = {
   },
 };
 
-const onDragStart = () => document.body.classList.add('dragging');
-
-const onDragEnd = () => document.body.classList.remove('dragging');
-
 const saveSizes = sizes => {
   try {
     localStorage.setItem('panelSizes', JSON.stringify(sizes));
@@ -129,9 +134,12 @@ class Layout extends React.Component {
         height: 0,
         width: 0,
       },
+      isDragging: false,
     };
 
     this.onResize = this.onResize.bind(this);
+    this.onDragStart = this.onDragStart.bind(this);
+    this.onDragEnd = this.onDragEnd.bind(this);
   }
 
   componentDidMount() {
@@ -142,6 +150,14 @@ class Layout extends React.Component {
     window.removeEventListener('resize', this.onResize);
   }
 
+  onDragStart() {
+    this.setState({ isDragging: true });
+  }
+
+  onDragEnd() {
+    this.setState({ isDragging: false });
+  }
+
   onResize(pane, mode) {
     return size => {
       this.layerSizes[pane][mode] = size;
@@ -200,8 +216,8 @@ class Layout extends React.Component {
           size={showStoriesPanel ? storiesPanelDefaultSize : 1}
           defaultSize={storiesPanelDefaultSize}
           resizerStyle={storiesResizerStyle(showStoriesPanel, storiesPanelOnTop)}
-          onDragStarted={onDragStart}
-          onDragFinished={onDragEnd}
+          onDragStarted={this.onDragStart}
+          onDragFinished={this.onDragEnd}
           onChange={this.onResize('storiesPanel', storiesPanelOnTop ? 'top' : 'left')}
         >
           {conditionalRender(
@@ -225,11 +241,17 @@ class Layout extends React.Component {
             size={showAddonPanel ? addonPanelDefaultSize : 1}
             defaultSize={addonPanelDefaultSize}
             resizerStyle={addonResizerStyle(showAddonPanel, addonPanelInRight)}
-            onDragStarted={onDragStart}
-            onDragFinished={onDragEnd}
+            onDragStarted={this.onDragStart}
+            onDragFinished={this.onDragEnd}
             onChange={this.onResize('addonPanel', addonPanelInRight ? 'right' : 'down')}
           >
             <div style={contentPanelStyle(addonPanelInRight, storiesPanelOnTop)}>
+              {/*
+                When resizing panels, the drag event breaks if the cursor
+                moves over the iframe. Show an overlay div over iframe
+                at drag start and hide it when the drag ends.
+              */}
+              <div style={overlayStyle(this.state.isDragging)} />
               <div
                 style={previewStyle}
                 ref={ref => {