inline toolbar draggability

HTML

<script src="http://fonts.googleapis.com/css?family=Lato"></script>
<script src="https://s3.amazonaws.com/static.ephox.com/jsfiddle/textboxio/textboxio.js"></script>
<div id="editable_region">
  <h1>Draggability</h1>

</div>

<div class="draggable article">
  <p>Click this region. The toolbar can be dragged from the side.</p>
</div>

<div class="notdraggable article" style="margin-top: 3em">
  Click this region. Its tool bar is <b> NOT </b> Draggable.
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:100,400,700,900);
body {
  background-color: rgb(232, 111, 12);
}

#editable_region {
  margin-top: 5em;
  color: white;
  font-weight: 400;
}

#editable_region p {
  font-family: 'Helvetica Neue';
}

#editable_region h1 {
  text-transform: uppercase;
  font-family: 'Lato';
  font-size: 5em;
}

div.article {
  font-family: 'Helvetica Neue';
  color: white;
  font-weight: 200;
}

JavaScript

var configNotDraggable = {
  ui: {
    toolbar: {
      draggable: true
    }
  }
};

textboxio.inline('.draggable')
textboxio.inline('.notdraggable', configNotDraggable); //note: here we've stated not to make the toolbar draggable