inline toolbar draggability

HTML

<script src="http://fonts.googleapis.com/css?family=Lato"></script>
<script src="https://s3.amazonaws.com/ephox-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: false
        }
    }
};


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