title: Jupyter notebook with detachable, floating and draggable widget?
body: <p>Using Jupyter Notebook (v. 6.0.0) via Anaconda (Navigator v. 1.9.7) on Windows 10. Consider a situation where I have a <code>ipywidgets</code> slider on top, then a whole lotta text in between, then a graph on the botton that responds to the slider. Here is an image of such a webpage in Firefox, zoomed out so that it can be shown in full:</p>
  
  <p><a href="https://i.stack.imgur.com/3N1eW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3N1eW.png" alt="jupyter_long_output.png"></a></p>
  
  <p>Clearly, this is difficult to use - and what I would prefer in this case, is to "detach" the widget that contains the slider, and drag it down to approx where the graph is, then manipulate the slider; in that case, I also would not have to use the webpage rendering zoomed out. Then when done manipulating, I'd like to click a button, and have the widget reattached to where it was.</p>
  
  <p>However, I am not sure, how could I implement this in Jupyter notebook with <code>ipywidgets</code>? The only thing close to this I've found is <a href="https://github.com/jupyter-widgets/ipywidgets/issues/2520" rel="nofollow noreferrer">[Question] Maintain position of floating widget when browser tab is closed · Issue #2520 · jupyter-widgets/ipywidgets</a>, which seems to imply that intervention in JavaScript is needed.</p>
  
  <p>Here is the code to recreate the screenshot (there is already a "Detach" button in the widget containing the slider, except it does nothing else but change its text):</p>
  
  <p>Cell 1 - Python 3:</p>
  
  <pre class="lang-python prettyprint-override"><code>import plotly.graph_objs as go
  import numpy as np
  from ipywidgets import widgets, Layout
  from IPython.display import display
  from IPython.display import Markdown as md
  
  inSlider = widgets.FloatSlider(
      value=1.0,
      min=0.0,
      max=10.0,
      step=0.01,
      description='In:',
      continuous_update=True
  )
  output2 = widgets.Output()
  
  def on_detButton_click(b):
      if b.description == "Detach": b.description = "Attach"
      else: b.description = "Detach"
  
  detButton = widgets.Button(description="Detach")
  detButton.on_click(on_detButton_click)
  
  myctlwidget = widgets.VBox([widgets.HBox([inSlider, detButton]), output2])
  display(myctlwidget)
  </code></pre>
  
  <p>Cell 2 is Markdown - pasted at end of this post;</p>
  
  <p>Cell 3 - Python 3:</p>
  
  <pre class="lang-python prettyprint-override"><code>fig = go.FigureWidget( layout=go.Layout() )
  fig.add_trace(go.Scatter(x=[0,10], y=[0,10],
                      mode='lines',
                      name='Test plot'))
  # set range to prevent autoranging when slider sets a new value
  fig.update_yaxes(range=[0, 11])
  
  def update_graph(change):
      with fig.batch_update():
          curval = inSlider.value
          fig.data[0].y=[0, curval]
  
  inSlider.observe(update_graph, names="value")
  
  widgets.VBox([fig])
  </code></pre>
  
  <p>Cell 2 - Markdown (note two spaces at end of each first line, to introduce a line break)</p>
  
  <pre class="lang-none prettyprint-override"><code>Test paragraph 0  
  Some text 0, 0.... some text 0
  
  Test paragraph 1  
  Some text 1, 1.... some text 1
  
  Test paragraph 2  
  Some text 2, 2.... some text 2
  
  Test paragraph 3  
  Some text 3, 3.... some text 3
  
  Test paragraph 4  
  Some text 4, 4.... some text 4
  
  Test paragraph 5  
  Some text 5, 5.... some text 5
  
  Test paragraph 6  
  Some text 6, 6.... some text 6
  
  Test paragraph 7  
  Some text 7, 7.... some text 7
  
  Test paragraph 8  
  Some text 8, 8.... some text 8
  
  Test paragraph 9  
  Some text 9, 9.... some text 9
  
  Test paragraph 10  
  Some text 10, 10.... some text 10
  
  Test paragraph 11  
  Some text 11, 11.... some text 11
  
  Test paragraph 12  
  Some text 12, 12.... some text 12
  
  Test paragraph 13  
  Some text 13, 13.... some text 13
  
  Test paragraph 14  
  Some text 14, 14.... some text 14
  
  Test paragraph 15  
  Some text 15, 15.... some text 15
  
  Test paragraph 16  
  Some text 16, 16.... some text 16
  
  Test paragraph 17  
  Some text 17, 17.... some text 17
  
  Test paragraph 18  
  Some text 18, 18.... some text 18
  
  Test paragraph 19  
  Some text 19, 19.... some text 19
  
  Test paragraph 20  
  Some text 20, 20.... some text 20
  
  Test paragraph 21  
  Some text 21, 21.... some text 21
  
  Test paragraph 22  
  Some text 22, 22.... some text 22
  
  Test paragraph 23  
  Some text 23, 23.... some text 23
  
  Test paragraph 24  
  Some text 24, 24.... some text 24
  
  Test paragraph 25  
  Some text 25, 25.... some text 25
  
  Test paragraph 26  
  Some text 26, 26.... some text 26
  
  Test paragraph 27  
  Some text 27, 27.... some text 27
  
  Test paragraph 28  
  Some text 28, 28.... some text 28
  
  Test paragraph 29  
  Some text 29, 29.... some text 29
  
  Test paragraph 30  
  Some text 30, 30.... some text 30
  </code></pre>